html table 列宽

Posted 2023-05-02

我在网页中做了两个table,第一个只有一行,第二个有若干行,两个表的列数相等,现要求第一个表的每列的宽度等于第二个表的相对应的列的宽度.
不能抛弃<table>,因为我要把数据库的数据读到table中,第一个表为表头,第二个表为数据,第二个表是带滚动条的,已实现,我的思路是,当滚动数据时,表头不动,数据动.现要求两个表的列宽相等,以求好看. 请给个代码,好的加分啦.
第一个表的表格(表头)是这样画出来的
<%for each x in rs.Fields%>
<td > <%response.Write(ucase(x.name))%></td>
<%next%>
第二个表的表格(数据)是这样画出来的
<% do until rs.EOF %>
<tr bgcolor="#F8FFF9" ONCLICK="BIANSE1(TB1)" >
<%
for each x in rs.Fields
<td > <%Response.Write(x.value)%></td>

next
%>
<%rs.MoveNext%>
</tr>
<%
loop
conn.close
%>

1.table 设置 宽度，绝对宽度和相对都可以 

table-layout:fixed ; 
设置了这个属性，其余所有td都是相同的宽度。 

这样操作之后，table是宽度固定了，但是里面的文章如果很长，文字会覆盖 

解决办法： 

在 td 里面 加上 style="word-wrap:break-word;" 自动换行就好了，如果不想换行，可以将超出内容设为隐藏，并且用省略号代替： 

在td上面加 

overflow:hidden; 
white-space:nowrap;

参考技术A 使用 <colgroup> 元素
在 <table> 下添加以下元素作为 <table> 的第一个子元素

<colgroup>
<col class="col0" />
<col class="col1" />
<col class="col2" />
<col class="col3" />
...
</colgroup>

然后在 css 里面设置

.col0min-width:200px;
.col1min-width:400px;
.col2min-width:800px;
.col3min-width:1600px;本回答被提问者采纳 参考技术B 抛弃<table>吧 淘汰的东西了 你看下还有几个大网站页面代码有<table>标签的？ 应该学习CSS布局

为啥我的 HTML 表格不尊重我的 CSS 列宽？

【中文标题】为啥我的 HTML 表格不尊重我的 CSS 列宽？

【英文标题】：Why is my HTML table not respecting my CSS column width?为什么我的 HTML 表格不尊重我的 CSS 列宽？

【发布时间】：2011-08-05 22:30:58

【问题描述】：

我有一个 HTML 表格，我希望前几列很长。我在 CSS 中这样做：

td.longColumn
 
     width: 300px;

这是我的表格的简化版本

<table>
  <tr>
   <td class='longColumn'></td>
   <td class='longColumn'></td>
   <td class='longColumn'></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   [ . . and a bunch more columns . . .]
  </tr>
</table>

由于某些原因，当有很多列时，该表似乎使该列

表格所在的容器没有任何类型的最大宽度，因此我无法弄清楚为什么它会向下挤压此列而不是尊重此宽度。

无论如何，无论如何，此列都会保持一定的宽度？ 这是外部容器 div 的 CSS：

#main

    margin: 22px 0 0 0;
    padding: 30px 30px 15px 30px;
    border: solid 1px #AAAAAA;
    background-color: #fff;
    margin-bottom: 30px;
    margin-left: 10px;
    _height: 1px; /* only IE6 applies CSS properties starting with an underscrore */
    float: left;
    /*width: 1020px;*/
    min-width:1020px;
    display: block;
    overflow: visible;
    z-index: 0;

【参考方案1】：

无法修改<td> width;，即列宽不可设置。您可以添加样式white-space:nowrap;，这可能会有所帮助。或者您可以添加 s 为列添加空间。

也许您可以通过 HTML 方式设置 col 宽度：<td width="70%">January>/td>

很遗憾，在 HTML 4.01 及更高版本中，这种方式无效。

【讨论】：

我看到他们在这里编辑它：w3schools.com/tags/tryit.asp?filename=tryhtml_td_width

@ooo - 是的，但他们使用的是 HTML 设置宽度的方式，而不是 CSS。也许 OP 可以这样做。

@ooo - OP == 原始海报，使用 Usenet 语言。哦，现在我知道 OP 就是你 :-)

我一直看到人们使用它，但我不知道它是什么意思，所以谢谢。

你不应该添加“ ”对任何东西！！超级糟糕..和错误..它的巴东

【参考方案2】：

这样的事情怎么样...

http://jsfiddle.net/qabwb/1/

HTML

<div id="wrapper">
    <div class="row">
        <div class="column first longColumn">stuff</div>
        <div class="column longColumn">more stuff</div>
        <div class="column">foo</div>
        <div class="column">jsfiddle</div>
    </div>
    <div class="row">
        <div class="column first longColumn">stuff</div>
        <div class="column longColumn">more stuff</div>
        <div class="column">foo</div>
        <div class="column">jsfiddle</div>
    </div>
    <div class="row">
        <div class="column first longColumn">stuff</div>
        <div class="column longColumn">more stuff</div>
        <div class="column">foo</div>
        <div class="column">jsfiddle</div>
    </div>
</div>

CSS

#wrapper 
    min-width: 450px;
    height: auto;
    border: 1px solid lime; 


.row 
    padding: 4px;   

.column 
    border: 1px solid orange;
    border-left: none;
    padding: 4px;
    display: table-cell;


.first  
    border-left: 1px solid orange;


.longColumn 
    min-width: 150px;

【讨论】：

在很多情况下，表格仍然可以使用。比如表格数据！

【参考方案3】：

如果您将规则 table-layout: fixed 应用于表格，您可能会更幸运地为表格单元格设置宽度 - 这在使用表格时帮助我解决了很多单元格大小问题。如果它符合表格的目的 - 显示多维数据，我不建议切换到仅使用 DIV 来排列您的内容。

【讨论】：

我必须添加 table-layout: fixed; width: 100%; 并且它有效。谢谢！

@nrodic 是的，如果表格没有设置宽度，它就不起作用

如果您有一个复杂的布局（例如，第一行/行标题的单元格数量与其他的不同），那么您可能还需要为每个列指定一个宽度.

【参考方案4】：

我同意 Hristo 的观点，但在某些情况下需要使用表格，解决表格问题的方法是将以下类添加到表格中，然后根据需要更改任何 td 宽度。

.tables border-collapse:collapse; table-layout:fixed;

我希望这对正在寻找表格解决方案的人有所帮助！

【讨论】：

这里我在想 HTML/CSS 有一些错误，因为它没有以“表格”中为每个表格指定的宽度呈现表格列和表格' 和 'td' 标签或样式应用于相同。相反，只是 我 太愚蠢了，不知道我应该做一个 CSS 声明，将 'table-layout' 属性设置为 'fixed'。 我真是个白痴。感谢您让我直截了当 - 它在没有其他方法的情况下完美运行。它甚至解决了下拉列表控件强制列到我想要的宽度的 2 倍左右的问题。

应该提到我使用 table-layout:fixed 和 width:auto 来达到我想要的结果。

完美运行。谢谢。

嘿，BH，我很高兴！很高兴它有帮助！

【参考方案5】：

我在需要间隔柱的一堆柱子上遇到了同样的问题。 我曾经这样做过：

<td style='width: 10px;'>&nbsp;</td>

但是当桌子比窗户宽时，间隔并不是真正的10px，而是5px。 在我的情况下，只使用没有 TABLE 的 DIV 不是一个选项。 所以我尝试了：

<td><div style='width: 10px;'></div></td>

而且效果很好！ :)

【讨论】：

使用内联样式有效。我还必须调整列标题并将其他标题样式设置为 width:auto;

【参考方案6】：

设置列宽 (td's) 的最佳方法是使用表头 (th's)。表格标题将自动设置您的 td 的宽度。你只需要确保你的thead中的列与你的tbody中的列数相同。

在这里查看： http://jsfiddle.net/tKAj8/

HTML

<table>
    <thead>
        <tr>
            <th class="short-column">Short Column</th> <!-- th sets the width -->
            <th class="short-column">Short Column</th> <!-- th sets the width -->
            <th class="long-column">Long Column</th> <!-- th sets the width -->
        </tr>
    </thead>

    <tbody>
        <tr>
            <td class="lite-gray">Short Column</td> <!-- td inherits th width -->
            <td class="lite-gray">Short Column</td> <!-- td inherits th width -->
            <td class="gray">Long Column</td> <!-- td inherits th width -->
        </tr>
    </tbody>
</table>

CSS

table  table-layout: fixed; border-collapse: collapse; border-spacing: 0; width: 100%; 

.short-column  background: yellow; width: 15%; 
.long-column  background: lime; width: 70%; 

.lite-gray  background: #f2f2f2; 
.gray  background: #cccccc; 

【参考方案7】：

同时给它max-width 和min-width 属性应该可以工作。

【讨论】：

这是最好的答案。

黄金！太感谢了。花了几个小时在这上面。我只需要min-width。

【参考方案8】：

使用表格布局属性和表格上的“固定”值。

table 
    table-layout: fixed;
    width: 300px; /* your desired width */

设置好表格的整个宽度后， 您现在可以以 td 的 % 为单位设置宽度。

td:nth-child(1), td:nth-child(2) 
    width: 15%;

您可以通过以下链接了解更多信息：http://www.w3schools.com/cs-s-ref/pr_tab_table-layout.asp

【参考方案9】：

我遇到了无法调整使用 colspan 的 table-layout: fixed 表中的列大小的问题。为了任何遇到上述建议不起作用的问题变体的人的利益，colgroup 为我工作（OP 代码的变体）：

div 
    margin: 22px 0 0 0;
    padding: 30px 30px 15px 30px;
    border: solid 1px #AAAAAA;
    background-color: #fff;
    margin-bottom: 30px;
    margin-left: 10px;
    _height: 1px; /* only IE6 applies CSS properties starting with an underscrore */
    float: left;
    /*width: 1020px;*/
    min-width:1020px;
    display: block;
    overflow: visible;
    z-index: 0;

td.longColumn  
     width: 300px;

table 
    border: 1px solid; 
    text-align: center;
    width: 100%;

td, tr 
  border: 1px solid; 

<div>
    <table>
        <colgroup>
            <col class='longColumn' />
            <col class='longColumn' />
            <col class='longColumn' />
            <col/>
            <col/>
            <col/>
            <col/>
        </colgroup>
        <tbody>
        <tr>
            <td colspan="7">Stuff</td>
        </tr>
        <tr>
            <td>Long Column</td>
            <td>Long Column</td>
            <td>Long Column</td>
            <td>Short</td>
            <td>Short</td>
            <td>Short</td>
            <td>Short</td>
        </tr>
        </tbody>
    </table>
</div>

【参考方案10】：

对于那些有表格单元格/列宽问题并且table-layout: fixed 没有帮助的人。

对表格单元格（<td> 或 <th>）应用固定宽度时，不要为所有单元格指定宽度。应该至少有一个具有（自动）宽度的单元格。该单元格将充当表格剩余空间的填充物。

例如

<table>
  <thead>
    <tr>
      <th style="width: 150">Assigned 150 width to Table Header Cell</th>
      <th style="width: 100">Assigned 100 width to Table Header Cell</th>
      <th>No width assigned</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="width: 150">Assigned 150 width to Table Body Cell</td>
      <td style="width: 100">Assigned 100 width to Table Body Cell</td>
      <td>No width assigned</td>
    </tr>
  </tbody>
</table>

附：你可以在这里使用样式类，你不需要使用内联样式。