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.
Related
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.
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.
In the following example,
<table style="width: 100%;"><tr>
<td>First Cell</td>
<td>Second Cell</td>
</tr></table>
How do I set the widths so that the first cell/column is exactly as wide as it needs to be to show the content of the first cell and let the second cell fill the rest of the width of the table?
I'm using a GWT HorizontalPanel to do this, so if there's either a html, css or gwt trick. Please let me know.
Thank you
Assuming that “as wide as it needs to be to show the content of the first cell” refers to width needs to show the content without line breaks, you can use something like this:
<table width=681 border><tr>
<td nowrap>First Cell</td>
<td width="100%">Second Cell</td>
</tr></table>
There is no guarantee that this will keep working, since requiring a cell to be 100% wide, yet include another cell with nonzero width, is an impossible requirement. But browsers currently do what seems to be closest to the requirement.
You could achieve the layout you’re aiming for without tables, as explained in this question:
xHTML/CSS: How to make inner div get 100% width minus another div width
HTML
<div class="two-columns">
<div class="fit-to-contents">First Cell</div>
<div class="fill-remaining-space">Second Cell</div>
</div>
CSS
.two-columns {
overflow: hidden;/* Contains descendant floats */
}
.two-columns .fit-to-contents {
float: left;
background: #ffd;
}
.two-columns .fill-remaining-space {
overflow: hidden;
background: #fdf;
}
I’m not sure if that would actually be appropriate for your use-case though, I’d need to see the context.
Tables take care of themselves in HTML. There is no need to force any cell to be any particular size.
What is it you're really trying to do?
What version of HTML are you using? (Hint: Upgrade to HTML5 and CSS!)
Just don't specify any widths at all (neither on the table nor on the cells) and use white-space: nowrap on your table cells.
Put a style of width:1px on the first cell. The table will then make the first cell as narrow as possible, without causing overflow.
Since "as narrow as possible" is the width of the word "First" in this case, you may want to throw in a white-space:nowrap too, otherwise it will display "First" and "Cell" on two lines.
Jsfiddle
What are good practices when selecting column widths in a table?
Let's say I have four columns, name (variable width), description (long content of text), count (max 3 chars), date (fixed format).
What would be a good practice? I'm thinking fixed width for descr., count and width (thus actually also making name "fixed" width).
But my real question is, how to select a particular width size.
For instance, if the date format is yyyy-MM-dd is there some trick to convert those 10 chars to a width which will guarantee that it shows ok in any browser using any font and font-size (without also taking up any excessive space)?
edit: With fixed I mean something akin to "fixed amount of pixels relative to font width"
You can declare white-space: nowrap; on all the cells that you want to stretch as much as they need without using extra space (name, date, count), and then simply give your remaining cell a width of 100%. This way the 100% wide cell will expand as much as possible, without causing the other cells to collapse on multiple lines.
If you want to save yourself lots of markup...
First, if by fixed width you mean a fixed percentage, add the following to your stylesheet:
.width1 {
width: 1%;
}
.width2 {
width: 2%;
}
.width99 {
width: 99%;
}
.width100 {
width: 100%;
}
This gives you the flexibility you need if you decide to apply an odd percentage width for any of them if you wish - for example width23 on one of them, width 27 on another.
Now this is the clever bit. Using the col tag, you can apply widths just once instead of on every cell. I know you can apply widths to just the first row, and they will set the widths for the same cell in every other row - but the col tag can be used for setting other properties too. For example:
<table class="width100">
<col class="width15" style="background-color: #cccccc;" />
<col class="width65" />
<col class="width10" />
<col class="width10" />
<tr>
<td>My Sample Name</td>
<td>My Sample Long Description</td>
<td>5</td>
<td>2010-Oct-08</td>
</tr>
</table>
I generally prefer to use this technique - but if it is a layout I will be using on multiple tables (for example the customers table may be the same layout as the agents table) then I will create a class for each column and set the width etc in that class. I will then apply the relevant class to each cell. I suppose both methods could be combined - the relevant class could be applied to the relevant col, but the fact that the properties are set in one place (the stylesheet) means that you only have to change it in once place.
Hope this helps and that it is what you are looking for.
Richard