I am new to CSS. When I run the following code in IE it lines up the spans as expected, fixing there widths to 100px and padding the sides with as much space as necessary depending on the window size.
<table ID="tblRecordCount" style="width:100%">
<tr>
<td />
<td style="width:100px">
<span ID="lbl1" runat="server">Records1</span>
</td>
<td style="width:100px">
<span ID="lbl2" runat="server">Records2</span>
</td>
<td style="width:100px">
<span ID="lbl3" runat="server">Records3</span>
</td>
<td />
</tr>
</table>
When you run it in Chrome the browser either sets the first td width to 0px and fills in the last one, or sets the first and last to 0 and stretches the middle ones to fill the space.
Any CSS tricks to tell Chrome to behave? You can see this behavior in jsFiddle.
Related
My goal is to style a button (or icon/image/etc.) in a table cell so that it fills the entire cell edge to edge.
I've created the following minimal example showing 3 rows. The first td in each row is colored Red, Green, or Blue for clarity and contains a div set to 100% width and height and a black background. The second td contains some content (could be anything) and has various height-related styles applied.
<table style="color:white">
<tbody>
<tr>
<td style="padding: 0; background:red">
<div style="height:100%; width:100%; background:black;">T1</div>
</td>
<td style="padding: 0; background:black;">padding:0</td>
</tr>
<tr>
<td style="padding: 0; background:green;">
<div style="height:100%; width:100%; background:black;">T2</div>
</td>
<td style="padding:10px; background:black;">padding:10px</td>
</tr>
<tr>
<td style="padding: 0; background:blue;">
<div style="height:100%; width:100%; background:black;">T3</div>
</td>
<td style="height:100px; background:black;">height:100px</td>
</tr>
</tbody>
</table>
You can see that because of the second td's height, the first td in the second and third rows are being resized without resizing their content. And the first row, with the 0px padding on the second cell, is working as intended with regards to the first cell, but requiring other cells to not be taller than my button is extremely limiting.
What is the correct way to implement this sort of cell-filling behavior? Preferably no-JS.
I made a simple HTML table, filled it with placeholder images, and spaced them with a background color. This is what I get:
Compare the rightmost image to the left... then notice how each image gets smaller. Very odd.
td {
padding: 5px;
background-color: #C6C6C6;
}
<table>
<tr>
<td>
<img src="http://www.examplesite.com/pholder.png" />
</td>
<td style="background-color: #FFFFFF;"></td>
<td>
<img src="http://www.examplesite.com/pholder.png" />
</td>
<td style="background-color: #FFFFFF;"></td>
<td>
<img src="http://www.examplesite.com/pholder.png" />
</td>
<td style="background-color: #FFFFFF;"></td>
<td>
<img src="http://www.examplesite.com/pholder.png" />
</td>
<td style="background-color: #FFFFFF;"></td>
<td>
<img src="http://www.examplesite.com/pholder.png" />
</td>
</tr>
</table>
As you can see, I space the table with a margin and empty columns. I think that may be the cause, but I'm not sure why or how to fix it while keeping the neat visual appearance. How do I fix this?
Note: The site is also mobile-responsive and has to scale images automatically, so setting a fixed width/height will not work for me.
I do not have a good answer to your exact question but I can tell you using a table for layout is a very bad practice especially if you want to make the site responsive. Tables are for tabular data display.
Using divs and css with media queries will assure that your layout is consistent. Sure it will take a bit more but there is a lot of good material out there on how to do it.
====EDIT ====
To fix the issue at hand as well you can add a width to the td. It will keep them the same size if you know how many elements will be displayed. In the current table you have 5 so
<tr>
<td width="20%">image</td>
<td width="20%">image</td>
<td width="20%">image</td>
<td width="20%">image</td>
<td width="20%">image</td>
</tr>
Tables try and space things depending on the content. It leads to the end cells getting squished.
When I put a table within a fixed-width container and the sum of the widths of the columns exceeds the container width, as a general rule, I observe the table won't overflow the container, but the columns will be rendered narrower than their styled width.
But I also observed some cases where the table indeed does overflow. One case that especially puzzles me is shown here (or in this Fiddle):
<div style="width:750px;border:1px solid black">
<table>
<tr>
<td>
<table>
<tr>
<td colspan="2">
<input style="width: 210px;">
</td>
</tr>
<tr>
<td style="width: 200px"></td>
<td><input style="width: 200px;"></td>
</tr>
</table>
</td>
<td>
<input style="width:400px">
</td>
</tr>
</table>
</div>
In Chrome (40.0), the column widths are preserved and the table overflows. In IE and FF, the table fits the container and the columns are shortened.
Is there a general rule for "squeezing" tables into containers? Is Chrome is buggy? Or is such convoluted table design hoplessly beyond specification?
You can set those width of the input to max-width:100% and width:100%
take a look at this https://jsfiddle.net/ky2okqy5/6/
UPDATED https://jsfiddle.net/ky2okqy5/7/
Chrome has a bug that seems unlikely to get fixed anytime soon:
https://code.google.com/p/chromium/issues/detail?id=178369
Basically it happens that Chrome can't handle column widths correctly if the cells themselves contain "width=100%" elements.
I need the 100% width elements in the cells.
Does anybody know a workaround for that bug?
Testcase:
<table style="width: 800px; border: 1px solid black">
<tr>
<td>
<table style="width: 100%; border: 1px solid blue">
<tr>
<td style="width: 100%; background: red;">
1
</td>
</tr>
</table>
</td>
<td>
<table style="width: 100%;">
<tr>
<td style="width: 100%; background: green;">
2
</td>
<td>
</td>
</tr>
</table>
</td>
</tr>
</table>
Simply adding
table-layout: fixed
for the outer table should do it. http://jsfiddle.net/ysqx6j4t/
NOTE: Chrome ignores td style widths unless they are set in very first row of a table. (IE used to do that about 15 years ago.)
So you can't have a single td and colspan=n in first row.
I apologize in advance for this being a response and not answer...
It seems that the bug has now infected not only Chrome, but also newer versions of Opera and Vivaldi. None of these work-around suggestions work with Chrome, Vivaldi, Opera (newer releases!), even if style widths are set in the first row, and especially if any column in that first row has a 'min-width' set -- a greedy (ie 100% is ignored).
Setting a column width to 100% so that is 'greedy' DOES work in all versions of Firefox (all the way back to version 3.5!). It also works in Opera 12 (!) but not Opera 65 -- [which shows that just copying someone else's code is not always productive.]
An aHA moment -->
The actual bug is this:
If a cell (in any column, not necessarily the first col in the first row) spans multiple columns, and attempts to force the colspan to be greedy, that ends up being applied to the first column ONLY - not to the group.:
So,
<!-- EXAMPLE 0 -->
...
<tr >
<td colspan=4>
<td colspan=8>
<table border=0 cellspacing=0 cellpadding=0 width=100% style="font-size:11pt;">
<tr style="font-size:8pt;">
<td width=100%><hr>
<td class=pnote> SYNOPSIS / EXAMPLE</tr>
<tr ><!-- THIS IS WHERE IT WENT WRONG IF THE CELL
had any markup in addition to colspan=2 -->
<td colspan=2><b>layerinfo = </b>App.Do (Environment, 'ReturnLayerProperties', {})
<!-- another solution is to encapsulate everything in this row/cell in another table ...
<td colspan=2><table width=100%...
</table>
-->
<tr style="font-size:8pt;">
<td width=100%><hr>
<td class=pnote> RETURNS</tr>
<tr >
<td width=100% nowrap><b>layerinfo : {</b>
<td class=pnote> </td>
...
</table></tr>
And the result now is correct [(a) the and the label no longer split the row equally, nor (b) the text on the spanned cell no longer defines the width
of the first column of the table. (wierd, but it happened)
So I have to pages which are the same. Each are displaying some articles in a table layout. The table layout and CSS are the same. However, the one page is listing hundreds of archive articles which after it gets about 80% loaded, the table cell that contains all the text shrinks to about 30% of the actual row width.
However, there is nothing different on the layout, properties, CSS. The row containing the cell that is shrinking is the right width. The odd thing is even if I put a "width="100%" on the cell in question, it still is short of the row's width by about 20%.
Any thoughts, suggestions?
NOTE: I removed the text and just left the actual layout and cell/table/row properties.
Correct page:
<tr>
<td>
<table width="100%" cellpadding="4">
<tbody><tr>
<td width="100%" valign="top" align="left">
<a class="docnavigation" href="removed link ">
<strong></strong>
</a>
<br>
<span class="steelNewsArticleDate"> </span> - <span class="Normal">
<br>
</span>
</td>
</tr>
</tbody>
</table>
Problem Page:
<tr>
<td>
<table width="100%" cellpadding="4">
<tbody><tr>
<td width="100%" valign="top" align="left">
<a href="removed link" class="docnavigation">
<strong> </strong>
</a>
<br>
<span class="steelNewsArticleDate"></span> - <span class="Normal">
<br>
</span>
</td>
</tr>
</tbody>
</table>
Look into the width of the <td> that contains the table. Setting the width to 100% only tells the table to expand to 100% of its container's width.
The problem had to do with a missing tag from a Wysiwyg editor cleaning up some bad HTML incorrectly. So it was forcing what would have been a parent row into a child table row.