Consider this simple HTML table:
<!doctype html>
<html>
<head>
<title>Test</title>
</head>
<body>
<table style="border-collapse: collapse; table-layout: fixed; width: 280px;">
<tr>
<td style="padding: 5px; width: 50px; border: 0; word-wrap: break-word;">a</td>
<td style="padding: 5px; width: 100px; border: 0; word-wrap: break-word;">b</td>
<td style="padding: 5px; width: 100px; border: 0; word-wrap: break-word;">c</td>
</tr>
</table>
</body>
</html>
This renders properly in every major browser, except in Chrome, in which the column widths bizarrely come out as 46px, 102px and 102px respectively.
If I take the CSS width declaration out of the table element, then it renders correctly in Chrome. But I need this in there, otherwise word-wrapping won't work correctly.
Any idea why this isn't working? I've tried different doctypes and this hasn't changed anything, so I'm assuming it's not an HTML5 table problem.
EDIT: It turns out that if you specify table-layout: fixed and a pixel width on the table element and pixel widths on each column, then Chrome will assume that your column widths include padding. This contravenes the W3C box model and is in violation of CSS2 required behaviour.
If you don't specify table-layout: fixed or you don't specify a pixel width on the table element, then Chrome will correctly assume your column widths that you specify exclude padding. All other browsers assume that your column widths exclude padding.
In the example above, specifying the widths as 60px, 110px and 110px would fix the problem in Chrome but then break it in every other browser. The values of 46px, 102px and 102px come from Chrome evenly distributing the columns with a ratio of 40:90:90 instead of 50:100:100.
I fixed this problem myself today using table-layout: fixed and box-sizing: border-box to force Chrome to stop taking padding into account. Otherwise you never know what sizing model Chrome will pick, even for two very similar tables.
Well, my math says Chrome's doing what it should:
102 + 102 + 46 = 250px -> Widths
2(5) + 2(5) +2(5) = 10 + 10 + 10 = 30px -> Padding
Widths + Padding = 250 + 30 = 280px, or the width you specified for the table.
my method to fix this, executed for chrome browser only. We only use fixed tables in our web app and it seems working good, it's good to know that sometimes Chrome dimensions the col width perfectly, but sometimes not depending on where the table is located (and most of it inside what it's located).
var correctedWidth;
var extraSize;
//chrome is taking the padding and border to calculate the column width , not other browsers
$('table.default.fixed > thead > tr > th').each(function()
{
if ($(this).attr('width')!='undefined' && $(this).attr('width')!=null)
{
if ($(this).attr('sizeUpdated')=="undefined" || $(this).attr('sizeUpdated')==null) {
extraSize = parseInt($(this).css('padding-left'))+parseInt($(this).css('padding-right'))+2; //2 for the borders (2*1px)
if ( parseInt($(this).attr('width'))!= $(this).width() )
{
correctedWidth=$(this).width()+2*(extraSize);
}
else
{
correctedWidth=$(this).width()+extraSize;
}
$(this).attr('width',correctedWidth+'px');
$(this).attr('sizeUpdated','Y');
}
}
});
I fixed this problem by removing a parent element (fieldset) that had the following property:
display: inline-flex;
It's better not to use styles inline within the HTML text.
Related
I'm having problems with table borders not always rendering correctly when the following conditions are met:
The table is contained within a div with overflow-y:scroll
Borders are collapsed on the table
elements are styled position:relative
As near as I can tell, this is occurring only on Chrome (Version 54.0.2840.98 on Mac OS 10.11.6). I've tested on Safari and Firefox with no issues.
I've managed a minimal case in JSFiddle (https://jsfiddle.net/5a0a4sL1/24/). The code looks like this:
.scroll {
background-color:white;
overflow-y: scroll;
width: 300px;
height: 200px;
}
.wrapper {
height: auto;
width: 280px;
padding: 10px;
margin: 0px;
}
table {
width:90%;
margin:0px 5%;
border-collapse:collapse;
}
td {
position:relative;
border:1px solid black;
}
<div class="scroll">
<div class="wrapper">
<table>
<tbody>
<tr><td style="height:39px;"></td></tr>
<tr><td style="height:75px;"></td></tr>
<tr><td style="height:111px;"></td></tr>
<tr><td style="height:39px;"></td></tr>
</tbody>
</table>
</div>
</div>
The page looks like this when there's an issue:
Here the borders for the bottom row-and-a-bit of the table are failing to render, though table contents would show if there were any. The presence and severity of the issue depend on the size of the Chrome window, which make me think this is a bug in the browser.
My question is this: Is there anything in the code that looks like I'm obviously abusing the browser? Any tweaks that might accomplish the same task (the position:relative is required for the placement of resizing handles) without making Chrome angry? Or is this just a clear browser bug?
Edit: I believe this isn't the "table borders disappear with position:relative" issue discussed here, for example. Borders for table cells are often partially rendered, and the issue disappears if (for example) scrolling in the y direction is removed.
I replicated the problem. The rendering is different in each browser. It could be a browser bug.
A simple workaround to get it to work perfectly in all browsers would be to add <div> inside each td and style them with position: relative. And if you want the div to take same height as the td, then also give them height: 100%.
Here's a demo.
Off-Topic Note (kind of relavant to the cause of the problem):
When you give padding 10px to an element with width 300px, the actual width becomes 320px. And if you give it border 1px, the actual width will be 322px (border left 1px and border right 1px). To get an actual 300px with padding 10px and border 1px, give the element this attribute: box-sizing: border-box;. Same concept applies for "height".
For example, when you gave an element height 39px and border 1px, the actual height is 41px (1px top border + 1px bottom border). If you add box-sizing: border-box to the td, then the height would be 39px.
I have a table with the following CSS:
width: 100%;
border-spacing: 0px;
table-layout: fixed;
I then have 3 columns specified with the following classes:
#UsedColumnWidth: 26px;
#DeleteColumnWidth: 18px;
.UsedCountColumn {
width: #UsedColumnWidth;
}
.DeleteColumn {
width: #DeleteColumnWidth;
}
.CapabilityColumn {
/*width: #ContainerWidth - #UsedColumnWidth - #DeleteColumnWidth;*/
/*width: 100px;*/
}
I noticed when looking in chrome developer tools that the width's of my UsedCountColumn and DeleteColumn is 2 more pixels than I have specified and I cannot figure out why this occurring. I thought that maybe border-spacing was messing it up, but I have that set to 0. Any ideas on why this is happening?
This is why its adding the padding without showing it. I take it that you´re using LESS :)
If we are talking about the "browser default css" then there are some padding and margin for sure.
The reason people are making reset.css documents is because browers have different "default css values".
Eg. some browsers have a more gray/yellow´ish background, where others are totally white.
In order to ensure a better layout and that it look the same in other browsers, you would need to do a css reset.
example.
* {
margin: 0;
padding: 0;
/* ect styles */
}
And ofc..
total visual width = padding + width + border
total fill width = padding + margin + width + border
same goes for height ofc :)
I'm guessing this is because you have a 1px border, adding a total of 2px to the element. If this is the case, you can still keep the border, but should either add box-sizing or use outline instead.
Consider the following code:
HTML:
<table>
<tr>
<td><img src="http://watduck.jpg.to" /></td>
</tr>
</table>
CSS:
table { width: 10% }
img { max-width: 100% }
The image should obviously be a 10th the width of the window, which is exactly what it is in every browser except IE, where it simply falls back to its original size.
However, consider this:
HTML:
<div><img src="http://watduck.jpg.to" /></div>
CSS:
div { width: 10% }
img { max-width: 100% }
which IE does get right, and displays at a 10th of the window width.
So, here's the question: what causes this behavior, and what could possibly be done to force IE to respect the table's width?
Tested in IE8 & IE9 (don't care about IE7 and below).
If you specify table-layout: fixed; in the table css it works.
There seems to be some contradictory terminology in the standard regarding table layouts. In particular, table-layout: auto; says this:
The column width is set by the widest unbreakable content in the cells
Since the images content is unbreakable, it sets the width of the cell to the size of the content. The max-width seems to be overriden by it.
I'm looking for a 3 column css layout, with 1 fixed section at the middle and 2 fluid sidebar around it:
http://www.uploadup.com/di-UEFI.png
middle has 250px width (for example) and sidebars have (at minimum) 150px width. if browser width was longer than 550px (250+300), sidebars should have a longer width. (and middle always is 250px)
What is the CSS can do it? with compatibility in all browsers.
note: i saw this page, but i don't know how to change it for my wish
You can try to use inline-blocks for it. They are used rather rarely, but sometimes they are pretty good for layouts.
So, look at this: http://jsfiddle.net/kizu/UUzE9/ — with inline-blocks you can create layouts with any number of fixed and fluid columns. The algorithm:
At first, you add the padding equal to the sum of all the fixed columns to the wrapper. In your case — 250px.
Then, you add min-width to the wrapper equal to the sum of all the fluid columns' min-width.
Then, you add white-space: nowrap to the wrapper, so the columns won't jump.
And then just add the all columns that you need.
If you need support for IE7 and lesser, there are some additional things to know except for common inline-block fix:
You must return white-space: normal to the inner child of a column, or the columns won't stay on one line.
There can appear a phantom scroll in IE, maybe there is a better way to remove it, but I just use overflow: hidden on some wrapper.
Enjoy :)
To make this work in IE6/7 without JavaScript, the easiest way to do this is with a table.
I know, I know. It's not that bad in this case, all considered.
See: http://jsfiddle.net/thirtydot/Q2Qxz/
Tested in IE6/7 + Chrome, and it will just work in all other modern browsers.
HTML:
<table id="container" cellspacing="0" cellpadding="0">
<tr>
<td id="left">fluid</td>
<td id="mid">fixed</td>
<td id="right">fluid</td>
</tr>
</table>
CSS:
html, body {
margin: 0;
padding: 0;
border: 0
}
#container {
border: 0;
table-layout: fixed;
width: 100%
}
#container td {
vertical-align: top
}
#mid {
width: 250px;
background: #ccc
}
#left {
background: #f0f
}
#right {
background: #f0f
}
If you don't use one of the ready templates out there,
You can start by three div floated left, the middle with width: 250px and the outside ones with
min-width: 150px
You might want to replace it with the <section> tag, just give it a display: block
I have a table I am using as a toolbar on a web page. It works great in all browsers except for IE7. The issue is that it expands the table to fit the contents (pushing the content off the screen) unless I specify "table-layout: fixed" in the CSS. When I set the table layout to fixed it makes all the cells the same size, but I want them to size automatically to fit the content (and word wrap if needed). Setting "width: auto" on the cell does not do anything.
Here is the HTML:
<table id="ToolbarTable" cellspacing="0px">
<tr>
<td class="ToolbarCell" align="center">
Button1
</td>
<td class="ToolbarCell" align="center">
Button2 Button3 Button4
</td>
<td class="ToolbarCell" align="center">
Button5 Button6 Button7 [Button8 Button9 - not always visible]
</td>
</tr>
</table>
And the CSS:
#ToolbarTable
{
margin-top: 1px;
width: 100%;
min-height: 24px;
table-layout: fixed;
word-wrap: break-word;
}
#ToolbarTable td
{
min-width: 50px;
width: auto;
border: solid 1px #000000;
}
In IE7, how can I make a table a specific width (and have IE7 honer it), while still letting the width of the table cells resize automatically?
EDIT: added code examples.
Try using min-width in connection with a set width. I believe this combination should work with IE 7.
You need to set a table width for the entire table.
And otherwise there's only one option, setting the table width's manually (easy to gather by using developer tools that most modern browsers include (IE8+, FireFox, Chrome, Safari, etc.), you can read the width's there). Otherwise I wouldn't know.
Although I had spaces between the buttons I also had some spaces there and it was preventing the word wrap and causing the table width to exceed the width I specified. Removing from between the buttons fixed the problem. Each was surrounded by a space (I just wanted to add more space) and all other browsers were doing the line break correctly, but IE7 must either remove the extra spaces or assume they should be spaces.