可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):
问题:
Is it possible to have a table with width 100% (so the table fits the screen size), where the first and the last column have a fixed width, and the columns between take the rest, both 50%.
Like:
+--------------------+--------------------------------------+--------------------------------------+------------+ | width:300px; | with dynamic, equals next column | width dynamic, equals prevous column | width:50px;| +--------------------+--------------------------------------+--------------------------------------+------------+ +--------------------+--------------------------------------+--------------------------------------+------------+ +--------------------+--------------------------------------+--------------------------------------+------------+ +--------------------+--------------------------------------+--------------------------------------+------------+
回答1:
What about using jQuery for this and calling javascript function once your table is created or some other event (like click) happens?
See here (I created jsfiddle playground for this)
What it does is that it checks the width of fixed elements (width of the whole table, first and last cell). Then it calculates and assigns the width for the rest of the cells which should have the remaining width divided between them (based on how many there are and how much space is left). Of course this is just quick example of possible solution. It needs polishing (checking null objects, if remaining width is greater than 0, ...)
回答2:
Try this:
As you can see the two centre column remain equal sized, due to the table-layout:fixed, even when the content is of different length. Try adding more and less content to the two centre columns.
JSFiddle: http://jsfiddle.net/RtXSh/
CSS
table { width:100%; border-collapse:collapse; table-layout:fixed; } td { border: 1px solid #333; }
HTML
| test | test test tes test test | test | test |
回答3:
Try using the pseudo element first-child and last-child
If I'm not mistaken the other columns will align equally by themselves. You might need to use the !important statement behind the first-child and last-child widths.
table{ table-layout: fixed; width: 100%; } td { border: 1px solid black; } td:first-child{ width: 100px; } td:last-child{ width: 100px; }
| 100px | some text | some text | 100px |
However, as nurettin pointed out, if you use a thead and tbody section you have to style the header. Styling the td:first-child and td:last-child will not work.
table{ table-layout: fixed; width: 100%; } td { border: 1px solid black; } th:first-child{ width: 100px; } th:last-child{ width: 100px; }
| Column 1 | Column 2 | Column 3 | Column 4 |
|---|
| 100px | some text | some text | 100px |
回答4:
In my opinion, the simple, nice and easy way is that don't use the px and % together. If you are using table width 100%, then define width of first and last column in % as well. If you are interested in that, here is how you can do:
CSS:
.mytable { width:100%; border: 1px solid green; } .left{ width:30%; border-right:1px dashed blue; } .mid1{ width:30%; border-right:1px dashed blue; } .mid2{ width:30%; border-right:1px dashed blue; } .right{ width: 10%; border-left:1px dashed blue; }
HTML:
| Left Column, 30% | Mid 1, 30% | Mid 2, 30% | Right, 10% |
回答5:
This can be handled by adding the style table-layout:fixed to the table element, and simply not specifying any width value for the columns you wish to evenly divide the width remaining after the fixed columns have been accounted for.
Further, using combinations of
I've created an example at JSFiddle: https://jsfiddle.net/3bgsfnuL/1/
| left fixed | col 1 | col 2 | col 3 | right fixed |
回答6:
Nobody mentioned this one here trick: table{ table-layout: fixed; width: 100%; } th:first-child{ width: 300px; } | yourfirst300pxcolumn | fixedwidth | fixedwidth also |
|---|
| 300 | something | something else |
|
