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.
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 am facing the issue with html Table element cell width. Width of the table cell is not same in IE8 and IE9. Please find the below code snippet where I set the width for table cell using table colgroup and width for table as 100%.
[Html]
<table id="Grid1_Table" class="Table">
<colgroup>
<col style="width:20px">
<col style="width:20px">
<col style="width:180px">
<col style="width:200px">
</colgroup>
<tbody>
<tr>
<td class="RowHeader"><div> </div></td>
<td class="RecordPlusCollapse" ><div> </div></td>
<td colspan="2" class="GroupCaption">Order ID: 0 - 1 Items</td>
</tr>
</tbody>
[CSS]
.RowHeader
{
background-color : black;
}
.GroupCaption
{
background-color : #868981;
}
.RecordPlusCollapse
{
background-color : red;
}
.Table
{
width:100%;
}
Please refer the below fiddler file to check the issue with IE8 and IE9.
http://jsfiddle.net/KgfsM/21/
Could you please check on this?
First of all, the markup violates the HTML table model; if you try to validate the code snippet using HTML5 doctype (and the missing </table> added), the validator will report the error “Table column 4 established by element col has no cells beginning in it.”
Second, you are setting column widths in pixels and the total table width as 100%. This constitutes a request that cannot be fulfilled except in a very special case where the available width happens to coincide with the sum of the pixel widths plus borders, border spacing, and cell spacing. It’s no wonder that browsers react differently to this.
Thus, you need to specify the widths consistently. Either remove the setting of 100% width, or remove at least one of the column width settings. You might still have a problem (browsers may react differently even to this), and table-layout: fixed might not help (or might introduce new problems), but then there would a new, relatively well-defined problem.
I have three tables......
The first table is not given margin left.....
where as the next two tables i have given margin-left to move it slightly on the left side....
but when i resize the window i am not able to see the last column in other two tables....
how to fix it....
the first table looks fine even even after resize......
http://jsfiddle.net/x7HD9/
providing my code below
<table class="table" style="margin-left: 160px; width: 1759px;">
<thead>
<tr class="subBomListHeading subBomHeading" style="">
<th>BOM Type</th>
<th>Product P/N</th>
<th>Version</th>
<th>Brand Name</th>
<th>BOM Description</th>
<th>Generation</th>
<th>Version</th>
<th>Notes</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr style="background-color: #e5dcd1;" class=" subBom">
<td>sub BOM</td>
<td>99-00302-00</td>
<td>v.02</td>
<td>Creative</td>
<td>Hardware v1.0 System</td>
<td>G1</td>
<td>1</td>
<td>new</td>
<td><input type="radio" name="sex" value="male"></td>
</tr>
</tbody>
</table>
Try :
<table class="table" style="margin-left: 160px; width: 100%;">
Also, keep in mind that <tables> are not 'responsives' (has in 're-layout'), but still 'extensibles'.
Your table is displayed at it's minimum width, it's normal you don't see the last column, it overflows the viewport.
Im going to assume you have width: 100% set on your tables, thats your problem, they are set as the width of the window and then moved right so you cant see the last column, You should change the width to a lower value.
You have a couple problems here.
First, you've defined a fixed width to the tables. Depending on how the overflow property is set on ancestor elements, it can cause the clipping you describe because the element is too wide for that space. It's unclear as to how wide you want these elements to be, but something like this would do the trick:
table.brown {
min-width: 80%; /* or just plain `width: 80%` */
}
Ultimately, there will come a point where you won't be able to resize because the contents of the table simply won't allow it. Once your cells are down to 1 word wide, there's not much you can do to help longer words like "Description" without adding word-break: break-all.
Second, you want to use a different setting for your margins if you want to push it in a particular direction. Using auto as the value for margin-left would cause the element to shift all the way to the right.
table.brown {
margin-left: auto;
}
http://jsfiddle.net/x7HD9/3/
There's way too much CSS for me to even try and comprehend. I think starting from scratch with just a table and then gradually add CSS would be a good idea.
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.