I have a problem choosing the table cells.
I defined my table cells to have the following measurements:
cell 1: 220px
cell 2: 315px
cell 3: 265px
cell 4: 200px
Adds to 1000px
The measurements that I get when opening the table in a browser:
cell 1: 190px
cell 2: 264px
cell 3: 222px
cell 4: 168px
Adds to 844px
Note that I dont set the width of the table. I also have no other elements on the page apart from that table. Why does that happen?
Try this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css" media="screen">
table { border-collapse: collapse; table-layout: fixed }
td { padding: 0; border: 1px solid black }
</style>
</head>
<body>
<table>
<col width="220" />
<col width="315" />
<col width="265" />
<col width="200" />
<tbody>
<tr>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
<td>col 4</td>
</tr>
</tbody>
</table>
</body>
</html>
col is legal element used to layout the table cells.
In the above examples Firebug will show the cells' width with the desired size in pixels minus 1px for borders (which will collapse). The entire table will be exactly 1000px wide.
We really need more code to asses this. Please create a demo js-fiddle.
Did you use the style-rule: table-layout:fixed; border-collapse: collapse; on the table itself, together with the attributes: border="0" cellpadding="0" cellspacing="0"?
Did you also set the intended total table width of 1000px?
Set the width of your table, ad you'll get the correct result.
See this fiddle.
Related
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.
Here is my html:
<html>
<head>
<meta charset="utf-8">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-theme.css" rel="stylesheet">
</head>
<body style="padding-top: 47px;">
<table class="table table-hover table-striped-custom">
<thead>
<tr>
<th style="width: 5px;"></th>
<th>Column2</th>
<th>column2</td>
</tr>
</thead>
<tbody>
<tr>
<td style="background-color: #FF5F5F;width: 5px;"></td>
<td>blaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
<td>bla</td>
</tr>
<tr>
<td style="background-color: deepskyblue"></td>
<td>bla</td>
<td>bla</td>
</tr>
</tbody>
</table>
Problem is when setting width for first column: it won't go under 16px. If I put bigger width(20,50), colored column become larger, but when I try to set them thinner (for example 7px), It doesn't take any effect.
How can I do it, without removing any css class from existing template. Colored column have to be first, it's height must be as row's height and I have to be able to set it's width to any value I want.
It's because your bootstrap css is adding 8px padding to the table cells (which is why your min width is 16px: 8px left plus 8px right) - try adding padding:0; for those cells and it should work
Example
It's possible that bootstrap has set min-width on th or td. If so, I'd add an additional style block (in the HTML, if you can't add/edit external CSS), to allow the first column to be as small as you like:
<style type="text/css">
.table td:first-child, .table th:first-child {
min-width: 0;
padding: 0;
}
</style>
I'm writing a program which will produce an html file for displaying some data. I need all columns to be aligned, so I'm trying to use a single html table, but I want to have solid horizontal lines in between some of the rows to separate the data. Using border-top and border-bottom I've been able to get most of the way towards what I want, however the horizontal lines that this produces aren't solid (see image).
My questions are:How can I get solid horiztonal lines between some of rows in my tableAlso, a minor query, is there a better way of getting a bit of space between the row labels in the left hand column and the data. Currently I'm specifying a blank column.The html behind that image is as follows:
<html>
<head>
<meta HTTP-EQUIV="Content-Type" Content="text/html; charset=Windows-1252">
<style type="text/css">
tr.border_top td {
border-top:1pt solid black;
}
tr.border_bottom td {
border-bottom:1pt solid black;
}
</style>
</head>
<body bgcolor=white><b>DATA</b></p>
<table>
<col align="left"></col>
<col width=20></col>
<col align="right"></col>
<col align="right"></col>
<col align="right"></col>
<col align="right"></col>
<tr class="border_top">
<td><b>XYZ1</b></td>
<td></td>
<td>2.120</td>
<td><span style="color:blue">2.280</span></td>
<td><span style="color:blue">2.810</span></td>
<td>3.000</td>
</tr>
<tr class="border_bottom">
<td><b>ABC1</b></td>
<td></td>
<td>1.370</td>
<td><span style="color:blue">1.550</span></td>
<td>1.690</td>
<td><span style="color:blue">1.780</span></td>
</tr>
<tr>
<td><b>XYZ2</b></td>
<td></td>
<td><span style="color:blue">1.900</span></td>
<td>1.940</td>
<td>2.050</td>
<td><span style="color:blue">2.100</span></td>
</tr>
<tr class="border_bottom">
<td><b>ABC2</b></td>
<td></td>
<td><span style="color:blue">1.910</span></td>
<td>1.950</td>
<td>2.060</td>
<td><span style="color:blue">2.100</span></td>
</tr>
</table>
</body>
</html>
In the CSS add the remove the default border-spacing and add padding to the cells
table { border-spacing:0 }
td { padding:10px; }
JSFiddle Demo
Give your table a class, for example mytable.
Then in your CSS do:
.mytable {
border-collapse: collapse;
}
.mytable td {
padding: .2em;
}
The collapse makes the space between cells go away and therefore makes a continuous border, like you asked for. However, then all the texts are very close together, so a little padding on the cells makes it look nicer.
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.
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.