Maintain table width fixed
I have a table with dynamic data.
Depending on data, it expands or collapses.
I don't want it. I want a fixed width t开发者_如何学Gohat never expand or collapse.
How can I do that?
I've already tried <table width="300px"></table>
,
but it doesn't work.
The following should work:
<table style="width:300px;table-layout:fixed"></table>
You'd set the width of each column explicitly like so:
td.a {
width:100px;
}
td.b {
width:200px;
}
...
<table>
<tr><td class='a'>A</td><td class='b'>B</td></tr>
<tr><td class='a'>A</td><td class='b'>B</td></tr>
<tr><td class='a'>A</td><td class='b'>B</td></tr>
<tr><td class='a'>A</td><td class='b'>B</td></tr>
</table>
Either old ugly way
<table width="300"></table>
or the CSS way
<table style="width:300px"></table>
Of course, the best way is to use a separate stylesheet file, call it for example style.css
:
table {
width: 300px;
}
and your html document:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<table>
...
</table>
</body>
</html>
精彩评论