A table with two cells side by side:
<table>
<td disabled>Something Here</td>
<td style="margin-left:100px;" disabled>Second Cell</td>
</table>
The margin-left:100px does nothing to separate the second cell from the first cell. How do I create space to the left of the second cell?
Padding Left
padding-left:100px
Produces this result:
The content of the second cell now has 100px of space added to the left. The position of the cell background however remains unchanged.
Border-spacing
<table style="border-spacing: 100px 0; margin: 0 -100px">
Produces this result:
If I add a third table cell, I get this result:
I don't want spacing between every cell, just the second one.
Cellspacing
cellspacing in the table element creates spacing around every cell. I don't want that either, and one source states that cellspacing is not supported in HTML5.
Margin wont work with table cells. Try padding or cellspacing="" to table.
Or add a div inside the table cell and apply margin to the div.
<td style="padding-left:100px;" disabled>Second Cell</td>
According to CSS specifications, margin properties do not apply to table cells (elements with display: table-cell). It is valid to set them, but the setting has no effect.
The way to separate the cells of a table is to set border-spacing on the table element, e.g. with <table style="border-spacing: 100px 0">. However, this also sets the spacing between the cells and the edges of the table. This effect can be cleared using negative margins:
<table style="border-spacing: 100px 0; margin: 0 -100px">
<td disabled>Something Here</td>
<td disabled>Second Cell</td>
</table>
Caveat: IE 7 (and older) does not support border-spacing, but it supports margin properties, so on it the result would be all wrong. If this is relevant, put the CSS code in a style element and wrap it inside a “pseudocomment” that makes IE 7 and older ignore it.
Depending on the context, the simpler method of just setting left margin on the second cell may work well. However, it creates spacing inside the second cell, not between the cells. The difference between this and cell spacing matters e.g. if cells have backgrounds or borders.
Add another <td> element, set text color to same as background, and background-color to transparent, enter number of characters you want for spacing.
Illustration with background shown for display purposes:
<table>
<td>Something Here</td>
<td style='color:white; background-color: green'>123456</td>
<td>Second Cell</td>
<td>Third Cell</td>
</table>
Creates a 'Dummy Cell' with a spacing of 6 characters. Now set background to transparent.
Cell Background Set to Transparent and Text Color set to same as Parent Element.
<table>
<td>Something Here</td>
<td style='color:white; background-color: transparent;'>123456</td>
<td>Second Cell</td>
<td>Third Cell</td>
</table>
So far, my preferred method would be to simply add another <td> element for spacing. But I'm open to any better solution.
Related
I have a table with table-layout set to fixed. In the first row I have a td with text inside. It's something like:
<table>
<tbody>
<tr>
<td colspan="2" style=" min-width: 250px; width: 100%;">
<b>Vendor/Firm Information</b>
</td>
</tr>
<tr>
some content
</tr>
... and so on
</tbody>
</table>
So, the width of the first row is actually less than 250px. It's even less than content. So, I need to know: is there any reason for that? Is there something that don't allow the table cell to take appropriate width?
I use old version of Chrome (22.0.1229.0) and I think that it's rather a bug than incorrect styles.
In latest Chrome everything is alright.
I think that colspan="2" there is the reason.
There is no reasonable way to split that min-width between two spanned columns. So min-width constraint just get ignored on spanned cells.
Please see the response here:
Chrome, Safari ignoring max-width in table
The gist is that "max-width" only applies to block elements. So setting the table to "display: block;" should resolve the issue.
I want to make a 3 x 3 table which has Cell 4 spanning 2 rows below and insert Cell 5 below Cell 3. I tried adding a new row and add a cell into it, it occupies the spanning of cell 3 (adjacent to cell 4) instead of being directly below it.
Question is, how do I span cell 4 below (to make it 2 x 2) and add cell 5 beside it?
Code so far:
<table border = "1" cellpadding="10">
<tr>
<td>Cell1</td>
<td>Cell2</td>
<td rowspan = 2>Cell3</td>
</tr>
<tr>
<td rowspan = "2" colspan = "2">Cell4</td>
</tr>
</table>
I want to make something like this:
Any help would be much appreciated!
Just add another <tr>.
I added some css to make it more obvious:
tr{
height: 25px;
}
here's a fiddle. Explanation to follow briefly.
Explanation:
If the css is removed, you'll notice that the line almost disappears. That's because you practically don't have anything on that line. If you have another column of cells (either visible or invisible) which actually utilizes that row, the row will become visible.
This phenomenon happens because the height of the cells is auto, thus it shrinks to 0 when it's empty, which in your case happens because there is no cell that spreads only across on the aforementioned row.
EDIT:
There used to be a html only way, by setting the height inside the table elements, but it's supposedly deprecated as of HTML5 and should be avoided at all costs. Use css instead! If, for some reason, you REALLY need the old html only solution, it's displayed here. But it's a very very very very bad practice to use it, and it might not be compatible with some browsers and etc.
The same is valid for border = "1" cellpadding="10" as pointed out in the comments :)
You need to have an invisible spacer column first.
Also, here's a fiddle: http://jsfiddle.net/tnc1z531/
<style>
td
{
padding: 5px;
border: 1px solid black;
}
.spacer
{
border: 0;
padding: 0;
height: 30px;
}
</style>
<table>
<tr>
<td class='spacer'></td>
<td>Cell1</td>
<td>Cell2</td>
<td rowspan=2>Cell3</td>
</tr>
<tr>
<td class='spacer'></td>
<td rowspan="2" colspan="2">Cell4</td>
</tr>
<tr>
<td class='spacer'></td>
<td>Cell5</td>
</tr>
</table>
Can you please take a look at this Demo and let me know why there are lines between the cells in the table while there is no border setting?
<table style="width:300px">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
You can add
table{
border-collapse:collapse;
}
To collapse the borders
Fiddle
The default browser style add a padding of one pixel on table cells tags.
To avoid default browser css you can use a css file like http://meyerweb.com/eric/tools/css/reset/
You can also remove all borders in your table by using the border-spacing or border-collapse property on your table tag.
table {
border-spacing: 0;
}
or
table {
border-collapse: 0;
}
Use:
<table style="width:300px" cellspacing="0">
fiddle
The lines are caused by spacing between cells. It is empty space, which means that normally the background of the table (here, green) shines thru. This spacing is often described as “border spacing”, since it can be seen as spacing between logical borders. If no border has been set, like here, the borders still logically exist, though as zero width. For two adjacent cells, we thus have the setup
...[cell1 content] [right padding] [right border] [border spacing] [left border of cell2] [left padding of cell1] [cell1 content]...
So although it may look like a border, it is really spacing between (invisible) borders.
There are several ways to remove it:
Use the HTML attribute cellspacing=0 on the table element. This is supported by all browsers that render tables normally. Nominally, the attribute is deprecated in HTML 4, obsolete and nonconforming in HTML5, but browsers are still expected to keep supporting it.
Use table { border-spacing: 0 }, which corresponds to the HTML attribute. Browser support is good, but still more limited than for the other methods. This method lets you set nonzero border spacing for borders between rows, e.g. table {border-spacing: 0 2px}.
Use table { border-collapse: collapse }, which has very good browser support. It causes the collapsing border model to be used, with possible side effects. It makes the borders (possibly virtual, zero-width borders) of adjacent cells to coincide, so there cannot be any border spacing between them.
Ok, my problem is this, I had one master table and the <td>'s withing the table all aligned up pefectly and expanded nicley if header <th>'s wre beigger etc...
I had to break this table into 2 tables because I want the top portion to sort independent of the bottom section. Problem now is I have to manually set the width of the <td>'s in the bottom table so it has the same width as the top table. Is there a way for them to set automatically?
<table align="center" class="data_table" style="border-bottom-style: none; margin-bottom: 0px;">
<tr>
<th>
</th>
</tr>
</table>
<table align="center" class="data_table" style="border-top-style: none; margin-top: 0px;">
<tr>
<th colspan="9 title="Source of Repair (SOR) Remarks">SOR Remarks</th>
</tr>
<tr>
<td width="845px" colspan="9">
<textarea name="mcRemark" rows="7" cols="100" scrolling="auto">${mcRemark}</textarea>
</td>
</tr>
This
<td width="845px" colspan="9">
is the size of the top table and could change....thats my problem
They are now independent tables so the widths will be different.
You could use the data_table class to set the width of the cells in both tables to be the same.
Otherwise I'd imagine you could use javascript to grab th width of teh first table's cells and use those values to set the second table's cells. Bit messy though.
Without going with a javascript/jQuery solution, no, there is no way to do this with simple HTML/CSS. Rethink your solution by containing all data in one table, that way the TH's will dictate the column widths.
You could put them back in the same table and then pick a row to divide them and style that row to make it invisible. Through border colors and background colors. Faux two tables.
I have an empty table row just for separation between rows.
<tr>
<td colspan="5"></td>
</tr>
It's rendered in IE, FF, Opera and Safari. The question is, whether I should put some content inside of it or it is okay to leave it as it is?
Like:
<tr>
<td colspan="5"> </td>
</tr>
Well you could put an as column content to make sure the rows are displayed. The better way is to use CSS for spacing though.
Semantically, does the empty row serve a purpose, or is it purely for layout? If the latter, it may be worth considering dropping the empty row, and providing the separation via CSS. E.g.
<tr class="separate-below">
<td>Data before separater</td><td>More Data</td>...
</tr>
<tr>
<td>Data after separater</td><td>More Data</td>...
</tr>
With the following in the stylesheet:
TR.separate-below TD,TR.separate-below TH {
border-bottom: 1em solid white; /* use the background colour of a cell here */
}
Alternatively, you can use multiple <tbody> elements to group blocks of rows together (adding rules="groups" to the table element causes <tbody> elements to gain a horizontal border at top and bottom, and <colgroup> element to gain a border to their left and right):
<table rules="groups">
<thead>
<tr><th>Header</th><th>Header</th>...</tr>
</thead>
<tbody>
<tr><td>Data</td><td>Data</td>...</tr>
<tr><td>Data</td><td>Data</td>...</tr>
...
</tbody>
<tbody>
<tr><td>Data</td><td>Data</td>...</tr>
...
</tbody>
...
</table>
As you can see in this example from W3Schools using the is the best way to do what you want.
This is a very old question, but if somebody still needs a solution (problem exists with display: table-cell or table-row elements)
here's the solution:
.emptyElement:after{
content: "\00a0";
}
I wanted to add my solution which is a modification of #Dariusz Sikorski solution.
td:empty:after, th:empty:after {
content: "\00a0";
}
if you want to put content inside, i would use a no-breaking-space: , rather than a normal blank
You may have already tried this but if your trying to add some space in between rows have you tried adding some padding.
CELLSPACING=Length (spacing between cells)
CELLPADDING=Length (spacing within cells)
Karl
To ensure that empty cells are displayed the following CSS can be used:
table { empty-cells:show; }
You can use multiple tbody tags to group table rows. It's totally valid and more semantic.