How can I make a table with multiple rows that have different number of columns (but not always the same number .... columns can be added and removed dynamically) but still have the cells in each row take the full width of the row?
Of course, I'd like to use only CSS and avoid a Javascript solution.
Here is an example of my issue:
table{
border: solid;
}
td{
background-color: black;
color: white;
}
.fullWidth{
/* width: 100%; doesn't work */
}
<table>
<tr>
<td>
cell 1
</td>
<td>
cell 2
</td>
<td>
cell 3
</td>
<td>
cell 4
</td>
<td>
Cells are added and removed dynamically
</td>
</tr>
<tr>
<td class='fullWidth'>
this cell should be the full width of the table
</td>
</tr>
</table>
EDIT: I was trying to keep the question short and to the point, so I left out most of the details. :P
I am using a table because I am using Bootstrap's responsive tables on a jQuery Datatable, and I need to insert a custom row to add details to some of the rows. (Bootstrap's responsive tables already utilizes the default "child" row feature of Datatables, or I would have just used that)
Judging by the comments, what I'm asking isn't possible with CSS alone. I'm going to open a new question to address the Javascript solution with bootstrap responsive tables.
So the answer to the question on this page is: no, it is not possible.
EDIT: as long as you set the colspan correctly on the first inserted row, it looks like bootstrap's responsive table takes care of the rest. 👍
Related
In my webpage I have the following:
<table style="width:1000px">
<tr>
<td></td>
<td style="width:500px"></td>
<td></td>
</tr>
</table>
Can I assume that the first and last cell width will be both 250px? or should the behavior be browser dependent here?
Edit:
I am assuming that the first and last cells are empty
#ammcom what everyone has said so far is correct. If you go that route and set your empty cells with an explicit width, make sure you also set this in your CSS:
table { table-layout: fixed; } This will make the table honor your explicit widths like if you use 50% for two empty columns. The default behavior is: table-layout: auto which makes the table prioritize it's width according to content within the cells.
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>
I've got a set of tabular data that I'm presenting in a standard HTML table tag. The design calls for a one pixel separating line between each row as well as having all cells in a given row be vertically centered against each other. The various rows and cells can have an arbitrary height and need to grow based on the content inside of them.
The tricky piece here comes from the fact that the one pixel separating line is supposed to stop 15px from either side of the edge of the table. My initial inclination to solve this is to merely add a border-bottom to either my <tr> or <td> tags, however, I couldn't for the life of me figure out any sort of way to not get the line to go all the way across. If I put <div> tags inside of the <td> tags, I can then apply the border to there, but then my border bottom is right up against the bottom of the content rather than at the bottom of the row.
The only thing I've been able to make work feels really "dirty" to me.
<table>
<tr>
<td style="width: 15px;"> </td>
<td style="border-bottom: 1px solid gray;">My table data</td>
.... more cells here as needed
<td style="width: 15px;"> </td>
</tr>
</table>
This works because I add those two spacer cells on either end of the row. I've even gone pretty far down some non-table solutions, but I always run into issues trying to get the content to grow correctly (i.e. no absolute positioning in the various rows) and/or getting things to vertically center and wrap like they are supposed to.
Anybody have any better ideas? If it helps, I'm only supporting "newer" browsers, e.g. IE9+/etc, including mobile.
You can try adding a new row between each pair or rows with colspan="n" where n is the total number of collumns, and inside that new row you put a div with the desired specs (I would say 1px height, for instance).
HTML, add this between your rows:
<tr class="test_tr" >
<td colspan="3"><div class="test_div"></div></td>
</tr>
CSS:
.test_tr
{
height: 1px;
}
.test_div {
height: 1px;
width: 80%;
background-color: red;
margin: 0 auto;
}
Here is the Fiddle: http://jsfiddle.net/Y8eWR/
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.