固定表格单元格宽度 [英] Fixed Table Cell Width

问题描述

很多人仍然使用表来布局控件，数据等 - 这方面的一个例子是流行的jqGrid。但是，有一些神奇的事情，我不能看起来很惊讶（它的表为大声哭泣，可能有多少魔法？）

如何可能设置一个表的列宽，并像jqGrid一样遵守它！如果我尝试复制这个，即使我设置每个< td style ='width：20px'> ，一旦这些单元格之一的内容更大

解决方案

p>您可以尝试对所有行使用< col> 标签管理表样式，但您需要设置 table-layout：fixed 或code>或code>样式，并设置样式为< table> 单元格

https：/ /developer.mozilla.org/en-US/docs/Web/HTML/Element/col

 < table class =fixed> 
< col width =20px/> 
< col width =30px/> 
< col width =40px/> 
< tr> 
< td> text< / td> 
< td> text< / td> 
< td> text< / td> 
< / tr> 
< / table> 
  

这是您的CSS

  table.fixed {table-layout：fixed; } 
 table.fixed td {overflow：hidden; } 
  

A lot of people still use tables to layout controls, data etc. - one example of this is the popular jqGrid. However, there is some magic happening that I cant seem to fathom (its tables for crying out loud, how much magic could there possibly be?)

How is it possible to set a table's column width and have it obeyed like jqGrid does!? If I try to replicate this, even if I set every <td style='width: 20px'>, as soon as the content of one of those cells is greater than 20px, the cell expands!

Any ideas or insights?

解决方案

You could try using the <col> tag manage table styling for all rows but you will need to set the table-layout:fixed style on the <table> or the tables css class and set the overflow style for the cells

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col

<table class="fixed">
    <col width="20px" />
    <col width="30px" />
    <col width="40px" />
    <tr>
        <td>text</td>
        <td>text</td>
        <td>text</td>
    </tr>
</table>

and this be your CSS

table.fixed { table-layout:fixed; }
table.fixed td { overflow: hidden; }

这篇关于固定表格单元格宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！