How can I make columns under colspan of same width?
I have table header like in example.
<html>
<head>
<style>td {border: solid 1px black;}</style>
</head>
<body>
<table style="width: 100%;border-collapse: collapse;">
<tr>
<td rowspan="2">Some header columns or even several(big or small)</td>
<td colspan="4">pre-defined number of undercolumns</td>
</tr>
<tr>
<td>1</td><td>11</td><td>111</td><td>1111</td>
</tr>
<tr>
<td>data_row</td><td>4444</td><td>333</td><td>22</td><td>1</td>
</tr>
</table>
</body>
</html>
I have created a jsFiddle that demonstrates this.
Potentially the number of columns (to make same width) could be different. Changing the table-layout to fixed is not a solution in my case because of existence of other columns. I can not make them with fixed width since not sure of data content length. I also can not do them with percent width since it is percent of all table, but not column group.
You can try this:
td {
border: solid 1px black;
width: calc(100%/5);
}
And you can divide the width as many columns as you have.
Related
Can you explain why these two HTML codes result in different look when rendered? fiddle1 and fiddle2
The only difference in the code is that in fiddle1 style="width: 50px;" is in the first row of the table, while in fiddle2 it is in the second row. But this results in different widths for each one.
According to Chrome Dev Tools fiddle1 both cells/columns have 51px width (should be 50px anyways), and in fiddle2 the first cells/columns have 49px width and the second 50px width.
Markup in Fiddle 1
<table>
<tr>
<td style="width: 50px;">Test</td>
<td style="width: 50px;">Testing 1123455</td>
</tr>
<tr>
<td>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td>
<td>B</td>
</tr>
</table>
Markup in Fiddle 2
<table>
<tr>
<td>Test</td>
<td>Testing 1123455</td>
</tr>
<tr>
<td style="width: 50px;">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td>
<td style="width: 50px;">B</td>
</tr>
</table>
CSS for both fiddles
table {
table-layout: fixed;
width: 100px;
}
td {
border: 1px solid black;
overflow: hidden;
}
That is the magic of 'table-layout: fixed'.
As specified in this link
The table-layout CSS property specifies the algorithm used to lay out cells, rows, and columns.
When the value is 'fixed': Table and column widths are set by the widths of table and col elements or by the width of the first row of cells. Cells in subsequent rows do not affect column widths.
In your first case: As you specified the width for columns of first row. Rendering algorithm takes the width and renders it with that width. The extra 1px you see, is just the border width.
In Second Case: As there is no width for first row specified. It takes the table width and try to adjust the row columns in it. As for two columns there will be three borders, we left with the 97px to be divided among the two columns. As pixel cannot be divided into decimals, you get 48px and 49px width of columns. extra 1px is for the border width
I am trying to give min width to table cells using col element of colgroup. The table is wrapped by a div which has some width set(less than combined width of all cells set in col) and overflow of div is set to auto.
Here is my html code -
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.table-block {
border-spacing: 0;
border-collapse: collapse;
}
.cell {
padding: 5px 10px;
border: 1px solid silver;
}
</style>
</head>
<body>
<div style="width:200px;overflow: auto">
<table class="table-block">
<colgroup>
<col style="width:300px">
<col style="width:300px">
</colgroup>
<tbody>
<tr>
<td class="cell"><em>2(0,2)</em></td>
<td class="cell"><em>3(0,3)</em></td>
</tr>
<tr>
<td class="cell"><em>2(0,2)</em></td>
<td class="cell"><em>3(0,3)</em></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
My problem is cells doesn't take width from col. It is trying to fit themselves in the wrapper div. I want that the cells take the proper width given and a scrollbar should appear. I have a solution that I set table width set to the total width I need. This would require me to update table width every time I insert new column by JavaScript.
My Solution -
<div style="width:200px;overflow: auto">
<table class="table-block" style="width:600px">
<!-- table things -->
</div>
Is it a right thing to do? And why it happens?
jsFiddle link
I think the problem here is that ultimately the table defaults to 100% width of the container, and its inner elements are unable to surpass this without their content forcing it to do so. The same happens when attempting to give a tr or td a width greater than the table's own.
Your fix is pretty much the way I'd do it. The only change I'd make is:
<div style" ... overflow-x:scroll; overflow-y:hidden;">
This way a scroll bar won't appear down the side on older versions of IE.
This of course assumes that you only want your table to scroll horizontally.
Check out this fiddle:
http://jsfiddle.net/foreyez/hQ9ZR/
<table background='red'>
<thead>
<tr>
<th style='width:3000px;background:red'>Students</th>
</tr>
</thead>
<tbody>
<tr>
<td>Joe</td>
</tr>
<tr>
<td>Shmoe</td>
</tr>
</tbody>
and the css is:
html,body { overflow:auto; }
When I make the width of the Header 3000px I'd expect it to cause an overflow (scrollbar) in the page. But it doesn't. It's because the width of the header cell doesn't change the overall table's width.
If you set the width of the table to 3000px, you'll see the overflow (scrollbar)
So basically, I'm wondering if there's a way to make it so the table's width is defined by it's headers widths?
Thanks
First of all this is not the way you style tables these days
<table background='red'>
use this instead
<table style="background:red;">
And secondly you need to use min-width for th instead of width
My Fiddle
<th style='border: 1px solid #fffff0;min-width:5000px;background:red'>Students</th>
I have to dynamically create a table with a variable number of columns, determined at runtime.
Can somebody tell me if it's possible to have a html table with equal size columns that are fully stretched?
If you don't know how many columns you are going to have, the declaration
table-layout: fixed
along with not setting any column widths,
would imply that browsers divide the total width evenly - no matter what.
That can also be the problem with this approach, if you use this, you should also consider how overflow is to be handled.
<table width="400px">
<tr>
<td width="100px"></td>
<td width="100px"></td>
<td width="100px"></td>
<td width="100px"></td>
</tr>
</table>
For variable number of columns use %
<table width="100%">
<tr>
<td width="(100/x)%"></td>
</tr>
</table>
where 'x' is number of columns
ALL YOU HAVE TO DO:
HTML:
<table id="my-table"><tr>
<td> CELL 1 With a lot of text in it</td>
<td> CELL 2 </td>
<td> CELL 3 </td>
<td> CELL 4 With a lot of text in it </td>
<td> CELL 5 </td>
</tr></table>
CSS:
#my-table{width:100%;} /*or whatever width you want*/
#my-table td{width:2000px;} /*something big*/
if you have th you need to set it too like this:
#my-table th{width:2000px;}
Just add style="table-layout: fixed ; width: 100%;" inside <table> tag and also if you do not specify any styles and add just style=" width: 100%;" inside <table> You will be able to resolve it.
table {
width: 100%;
th, td {
width: 1%;
}
}
SCSS syntax
I have an example of a simple HTML table that contains a number of div blocks.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head></head>
<body>
<table border=1 width="1000px" >
<tr><td></td><td></td><td></td><td></td></tr>
<tr valign="top"><td colspan="1" ><div style="width:180px;border: solid 1px black;">1</div></td><td colspan="3" ><div style="width:770px;border: solid 1px black;">2</div></td></tr>
<tr valign="top"><td colspan="4" ><div style="width:960px;border: solid 1px black;">3</div></td></tr>
<tr valign="top"><td colspan="2" ><div style="width:475px;border: solid 1px black;">4</div></td><td colspan="2" ><div style="width:475px;border: solid 1px black;">5</div></td></tr>
</table>
</body>
</html>
The problem is that the look of row 2 is not correct. The colspans are not behaving as expected. If I remove the fourth line then the second behaves correctly.
I am aware that divs and CSS is the way to go but for this application, at this time, this is not possible.
Your problem is auto table layout. It's hard for a browser to look at all the cells and work out how much width each is going to get from their content; it's double-hard when there are colspans (especially in this example where there's no way to tell how wide columns 3 and 4 should be at all); and it's triple-hard when you're poor old hard-of-thinking Internet Explorer, bless.
Don't make your browser struggle, wheeze and render slowly: use fixed table-layout and declare the width of every column exactly. Normally this would be done with <col> elements:
#thing { width: 950px; table-layout: fixed; border-spacing: 0; }
#thing .wide { width: 295px; }
#thing .narrow { width: 180px; }
#thing.box { border: solid black 1px; }
<table id="thing">
<col class="narrow" /><col class="wide" /><col class="wide" /><col class="narrow" />
<tr>
<td colspan="1"><div class="box">1</div></td>
<td colspan="3"><div class="box">2</div></td>
</tr>
<tr>
<td colspan="4"><div class="box">3</div></td>
</tr>
<tr>
<td colspan="2"><div class="box">4</div></td>
<td colspan="2"><div class="box">5</div></td>
</tr>
</table>
However there is a bug in Webkit that ignores <col> widths when there is no single unspanned cell in that column. This is quite unusual for tables, but it is the case in the above example: only the first column contains an unspanned cell. To work around it, you can either replace the <col> elements with a dud row at the start, styled to have minimal height:
#thing .cols td { height: 1px; line-height: 1px; font-size: 1px; }
<tr class="cols">
<td class="narrow"></td><td class="wide"></td><td class="wide"></td><td class="narrow"></td>
</tr>
Or, sometimes less intrusive, keep the <col>s and add a dud row at the bottom:
<tr class="cols"><td></td><td></td><td></td><td></td></tr>
I've seen lots of issues with this kind of formatting. Have you tried messing with <col>?
For example, (I know the numbers are probably off, but you can adjust as needed):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head></head>
<body>
<table border='1' width="1000px" style='border-collapse: collapse' >
<col width='180' /><col width='180' /><col width='180' /><col width='180' />
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr valign="top"><td colspan="1" ><div style="width:180px;border: solid 1px black;">1</div></td><td colspan="3" ><div style="width:770px;border: solid 1px black;">2</div></td></tr>
<tr valign="top"><td colspan="4" ><div style="width:960px;border: solid 1px black;">3</div></td></tr>
<tr valign="top"><td colspan="2" ><div style="width:475px;border: solid 1px black;">4</div></td><td colspan="2" ><div style="width:475px;border: solid 1px black;">5</div></td></tr>
</table>
</body>
</html>
See http://www.w3.org/TR/html4/struct/tables.html#h-11.2.4.2 For more info
What about the code is not working as expected? I tried your sample code and it works as it should: there are 4 columns in the table; the first row is empty, the second has two columns, one large and one short, the third row has one column that spans the whole table, and the fourth row has 2 columns.
I should point out that the divs inside the table don't necessarily match the widths of the columns they are in. That is because of the way table column widths are computed: The table has a fixed width (1000px). The columns are distributed within these 1000 px to best fit the containing data.
Row 1 says nothing about the column widths.
Row 2 says column1 must be at least 180px and column 2+3+4 must be at least 770px.
Row 3 says columns 1+2+3+4 must be at least 960px.
Row 4 says columns 1+2 must be at least 475px and columns 3+4 must be at least 475px.
Since nothing is said about column2, and column2 contains no data, it is being sized to the minimum width, and column1 is being sized to a larger width than you expect.
You can fix this problem by specifying the widths in the columns themselves, either using the <col> syntax, a CSS rule, or specifying the size in the first row of the table (using <td width="">.
This is an artifact of your css conflicting with your table widths (or lack thereof).
This code defines the cell widths in the first row, and then uses css to make the encosed divs fill the cells:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<style>
td div {
width:100%;
border: solid 1px black;
}
</style>
</head>
<body>
<table border=1 width="1000px" >
<tr><td width="18%">18%</td><td width="30%">30%</td><td width="26%">26%</td><td width="26%">26%</td></tr>
<tr valign="top"><td colspan="1" ><div>18%</div></td><td colspan="3" ><div>82%</div></td></tr>
<tr valign="top"><td colspan="4" ><div>100%</div></td></tr>
<tr valign="top"><td colspan="2" ><div>48%</div></td><td colspan="2" ><div>52%</div></td></tr>
</table>
</body>
</html>
The main issue is that you are defining widths for divs inside of table cells, expecting them to force your table into shape. In reality, your first cells (the empty ones on the top) have no defined width, so when you span across those undefined widths, you get more undefined width, and then you shoehorn some sized divs into them. You should probably either set your divs to 100% width, and size your cells, or simply style your cells, eliminating the divs altogther.
Best of all, just use css and divs, without a table, but I understand that that can be an exercise in frustration, especially if you are new to css.