I'm trying to create a table with a number of different sized cells, but from what I know creating tables with html/css seems too ridged for something like this:
Any help would be appreciated!
I think what you're looking for is cell width. You can do this in HTML (the CSS is only to show the result):
td {
background-color: red;
}
<table>
<tr><td width="500px">Cell 1</td><td width-"100px">Cell 2</td></tr>
</table>
You can change height too, but as far as I know you can only change height per row:
td {
background-color: red;
}
<table>
<tr><td width="500px" height="100px">Cell 1</td><td width="100px">Cell 2</td></tr>
</table>
in addition to the width and height of each , you can use the "colspan" and "rowspan" attributes as well. Like in the cell in your picture with the text: "Iraq war worth the cost", you can have something like the following:
<td rowspan="2">
See the following link for examples:
http://www.w3schools.com/tags/att_td_colspan.asp
Related
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. 👍
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 have the following table in my HTML:
<div style="max-width:700px;">
<table border="1">
<tr><td colSpan="2">this is a loooooooooooooooong text</td></tr>
<tr><td width="1px">a:</td><td >b</td></tr>
<tr><td width="1px">c:</td><td >d</td></tr>
</table>
<div>
I want the first column width in the second and third row to just fit the content length (that is why I put width="1px" there). In the mean while, I want to table width to just fit the length of the longest content in the table (which is the first row) instead of spanning to the max-width of its bounding div.
It works in Firefox as shown below.
However, in IE 9 it does not work as expected, as shown.
I tried to replace width="1px" with width="1%". But then the table width will span to the max-width of the parent div.
Does anyone know how to fix it in IE?
I have just tested in my IE9, and setting the width to 1px works. But it displays as you presented above in compatibility mode. Have you declared your doctype and all other fun stuff?
It might be because you are using older methods to display the table. You could try styling the table with borders and so on in CSS - such as:
table, td, tr, th{
border:1px solid #f0f;
}
.onepx{
width:1px;
}
<div style="max-width:700px;">
<table>
<tr><td colspan="2">this is a loooooooooooooooong text</td></tr>
<tr><td class="onepx">a:</td><td>b</td></tr>
<tr><td class="onepx">c:</td><td>d</td></tr>
</table>
<div>
and so forth - I am sure you get the idea. this might stop it automagically displaying in compatibility view (if it is the problem).
And finally, because IE9 is so stupid, you will have to turn off the compatibility view (if it is enabled on the page), because all pages within the domain will be viewed in compatibility view.
You mentioned that you have tried setting it to 1%, did you set the other to 99%?
<tr><td width="1%">a:</td><td width="99%">b</td></tr>
<tr><td width="1%">c:</td><td width="99%">d</td></tr>
I am trying to minimize the height of the table shown below. Firebug
tells me that table's height is 29, tbody's 25, and both rows together's 23.
The layout tab does not show that there is any padding, margins or border.
Though, it tells me that tbody has 2 pixel offset, and the same for tr.
Is there a way to prevent that offset?
<body>
<table style="width: 100%">
<tr>
<td>foo
</td>
<td>bar
</td>
</tr>
<tr>
<td colspan=2></td>
</tr>
</table>
</body>
Related question: Why do browsers insert tbody element into table elements?
If I understood your question correctly, it looks like you want to do this on all your table elements:
padding:0px
border-collapse:collapse;
http://www.w3schools.com/Css/pr_tab_border-collapse.asp
In general using a good reset.css should help you.
Maybe "CSS reset" will help:
http://meyerweb.com/eric/tools/css/reset/
Some line deal with table.
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.