HTML Table: How to resize data cells when already specified "colspan"?
I have tabular data to display, which has a meaning to both rows and columns. Columns are time blocks, rows are days. A particular datacell is confined to a single day, but can be in multiple time block. To show this, I am using the colspan tag.
<div id = "GuideTable">
<table>
<tr>
<td colspan = 3>
</td></tr></table>
</div>
Or Whatever.
I'm trying to apply CSS formating to the entire table, and for changing colors, etc, things are fine, but wanting to have a consistent width is where I am running into problems.
Right now, each data cell's width seems tied to the maximum width in its column (everything auto lines up). Some columns ar开发者_高级运维e itty bitty, others are huge. I'm trying to make columns consistently sized (even if that means every column is as big as the biggest column needs to be), but setting an individual datacells width (either via css or in the tag itself) is getting me nowhere.
I'm thinking maybe the colspan tag is overriding my manual width? If that's the case, how can I change the width of a column as a whole, especially since they aren't explicitly defined? (CAN you explicitly define columns?)
Examples of the CSS I'm using:
#GuideTable td{
background:#ffffff;
border-style: solid;
border-width: 1px;
width: 100px;
}
If you could give an example that would be great.
Table's have many special properties, cells must always fill up to 100% of the width of the table - period.
If you give a width property to a cell, that will work. CSS gets iffy as many things won't work.
So I ran a little experiment using the following code
<html>
<head>
<style type="text/css">
td
{
width: 100px;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td colspan="3">First Row</td>
</tr>
<tr>
<td>Second</td>
<td colspan="2">Row</td>
</tr>
<tr>
<td>The</td>
<td>Third</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
And The resulting table had a total width of 300px (give or take). and each cell was 100px wide. Perhaps there's something else that's affecting your cell widths. Try stripping away the CSS and adding it back part by part, even rediculious stuff can totally mess up CSS (like font-family causing a table to fly way off to the left, as I'm dealing with at the moment)
(Just found this while searching for something else)
If you don't need to support IE6 you can use the attribute selector to reset widths to cells with colspan:
td { width: 100px; }
td[colspan] { width: auto; }
If you do have to support IE6 you'll need to add a class to each cell with colspan:
<td colspan="2" class="colspan">...</td>
and
td { width: 100px; }
td.colspan { width: auto; }
加载中,请稍侯......
精彩评论