border on table cell - why does it stick out by 1px?

border-collapse
table border
html table outer border no inner border
table border css
html table cell border
mat-table border
how do i add a border to my html table
html table no border between cells

Why top/bottom border on <td> sticks out by 1px when table's container has certain width and when table is centered ?

Picture shows the problem:

HTML:

<body>
  <table>
    <tr>
      <td style=" border-top:4px solid green;border-right:4px solid green;">data 1
      <td>data 2            
  </table>
</body>

CSS:

table{
  margin:10px auto;
  border-collapse:collapse;
  text-align:center;
  line-height:30px;
}
td{    
  background-color:silver;
  width:100px;
}

You are not closing the <td> and <tr>:

  <td style=" border-top:4px solid green;border-right:4px solid green;">data 1
  <td>data 2</td>
</tr>

Also, add the following CSS for:

  1. Making borders even.
  2. Making to use border-box layout.

CSS:

* {box-sizing: border-box;}

td {
  background-color: silver;
  width: 100px;
  border: 4px solid silver;
}

Note: You might need to tinker a bit to get the right output. We can just advice you on the right direction.

Preview

Fiddle: https://jsfiddle.net/2vdf28xd/

border on table cell - why does it stick out by 1px? - css - html, Why top/bottom border on <td> sticks out by 1px when table's container has certain width and when table is centered ? Picture shows the problem: HTML:� By putting border-style: hidden; on the table itself, it means that “hidden” wins on that outside edge, but only the outside edge, not any of the other borders on the inside cells. See the Pen Inside Border on Table #3 by Chris Coyier (@chriscoyier) on CodePen.

It's because the width and height by default is calculated by the browser with

width = width + border left + border right + padding left + padding right

height = height + border top + border bottom + padding top + padding bottom

To avoid this, make sure the calculations are absolute with

 td {
      box-sizing: border-box;
 }

Good luck!

Examples of table borders and rules, table { border: 2px outset grey / darkgray; padding: 1px } td { border: thin inset grey /darkgray; Instead of border on TR, one could have set top and bottom on each cell. The shadow part seems to stick out, instead of being inside the border. table { border: 2px single black } td { border: thin single black collapse } In my notation: table { border: 2px solid black } td { border: thin solid black } Example 11. The shadow part seems to stick out, instead of being inside the border. That means it can overlap something else, but maybe that is a good thing

I've figured out that this is a BUG in older versions of Firefox.

This behaviour does not happen in new FF version and other browsers.

Position Sticky and Table Headers, It makes way more sense to sticky a parent element like the table header rather of a table, but not locked out of using position: relative and creating position: sticky Anyway, none of that matters if you just stick (get it?!) to using a sticky value on table { text-align: left; position: relative; border-collapse: collapse; } th, td� Then I tried making the right border of the left cell red instead, using the exact same markup. This time it didn’t work in IE but did work in FF and Chrome. If you make both the left border of the right cell red and the right border of the left cell red, it works in all of them.

You can add the following attribute for the table you might be using:

<table border="1">...</table>

Adding the border="1" attribute we can remove this 1px sticking out problem.

Right-aligned image has 1px gap on Outlook 2007, 2010, and 2013 , Right-aligned image has 1px gap on Outlook 2007, 2010, and 2013 does not exactly stick to the right edge of parent table cell, in stead, there is a 1px gap. I had tried many solutions such as border-collapes , mso-table-rspace If Outlook is still finding a way to mess that up, I would continue to define� If you don't want the border to go all around the table (or if you want a different border on each side of the table), you can use any of the following properties: border-top, border-right, border-bottom, and border-left. Here's an example of setting the border to only appear at the bottom of each table cell.

Margins and borders in Outlook > Litmus, Inside the cell my vertical spacing is controlled by margin-top. But I still can not find out why Outlook 2007 and 2010 and 2013 don't display the borders around I'm new to writing HTML so thanks for sticking with me! Give the containing table cell a background color of #cccccc and make the image 1px� Any table cell is “worth” one, unless it has a colspan attribute and then it’s worth that many. Add up the values for each table cell in that table row to get the final value. Each row should have exactly that value, or else you’ll get an awkward table layout that doesn’t make a rectangle (the longest row will stick out).

Tables in HTML, The tag for rows is <TR> (table row), so if we add three rows to our table, it now The table has no visible cell borders, and the size of the cells are adjusted to the content. Here we stick with the full code, to make it possible to see which code The style border-width is for all four sides of the cell, and can be split up in� Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML.

Html email table border not showing, I'm having trouble with the gutter table borders showing up in Outlook 07-10. this would work too: table {border: 1px solid #808080;} td {border: 0;} Mar 31, 2017 � We produce an Stick to tables when creating Outlook HTML email templates. I tried to apply a bottom border to the right cell and this is what it does. It'll work on the left cell fine but not the right. If you split the cell into even more columns you can create a bottom border for each cell independently except the right most which will create a bottom border for all cells in that row.

Comments
  • @DusanCani Did this answer help you to solve your issue or not?
  • Sorry for the confusion. I was talking about different offset, the picture shows it clearly now - I updated it.
  • This is not the problem.
  • Yes, that's the problem. The solution that shares praveen kumar is absolutely the same.
  • And my answer was first ;)
  • Shouldn't be a width of the top/bottom border the same as element width ?
  • @Dusan Cani, you can use box-shadow with browser prefixs. .green { box-shadow: 0 4px 0 0 green inset, -4px 0 0 0 green inset; } jsfiddle.net/103e9yLf/1