html -设置表格列宽常量而不考虑单元格中的文本量?

查看原始版本

在我的表中,我将列中第一个单元格的宽度设置为100px
但是,如果此列中某个单元格的文本太长,则该列的宽度将大于100px。如何禁用此扩展?

所有回答
  • Werner Lee #1

    我玩了一会儿,因为我搞不清楚。

    您需要设置单元格宽度(可以是thtd,我将两者都设置)并将table-layout设置为fixed。出于某种原因,单元格宽度似乎只有在设置了表宽度的情况下才保持不变(我认为这很傻,但这是什么)。

    此外,将overflow属性设置为hidden以防止表中出现任何额外的文本也是有用的

    你应该确保留下所有的边界和大小的CSS,太

    好吧,我有:

    table {
      border: 1px solid black;
      table-layout: fixed;
      width: 200px;
    }
    
    th,
    td {
      border: 1px solid black;
      width: 100px;
      overflow: hidden;
    }
    <table>
      <tr>
        <th>header 1</th>
        <th>header 234567895678657</th>
      </tr>
      <tr>
        <td>data asdfasdfasdfasdfasdf</td>
        <td>data 2</td>
      </tr>
    </table>
  • Edgar Lee #2

    见: http://www.html5-tutorials.org/tables/changing-column-width/

    在table标记之后,使用col元素。你不需要收尾牌

    例如,如果有三列:

    <table>
      <colgroup>
        <col style="width:40%">
        <col style="width:30%">
        <col style="width:30%">
      </colgroup>  
      <tbody>
        ...
      </tbody>
    </table>
    
  • Simona Lee #3

    只需在<td>内添加<div>标记或在<div>内定义宽度<th>。 这对你有帮助。其他都没用

    例如

    <td><div style="width: 50px" >...............</div></td>
    
  • Georgia Lee #4

    如果需要一个或多个固定宽度的列,而其他列应调整大小,请尝试将min-widthmax-width设置为相同的值

  • Bing Lee #5

    你需要在相应的CSS中写下这个

    table-layout:fixed;
    
  • Zoe Lee #6

    我做的是:

    1. 设置td宽度:

      <td width="200" height="50"><!--blaBlaBla Contents here--></td>
      
    2. 使用CSS设置td宽度:

      <td style="width:200px; height:50px;">
      
    3. 使用CSS再次将宽度设置为max和min:

      <td style="max-width:200px; min-width:200px; max-height:50px; min-height:50px; width:200px; height:50px;">
      

    听起来有点重复,但它给了我想要的结果。要轻松实现这一点,您可能需要将CSS值放在样式表中的类中:

    .td_size {    
      width:200px; 
      height:50px;
      max-width:200px;
      min-width:200px; 
      max-height:50px; 
      min-height:50px;
      **overflow:hidden;** /*(Optional)This might be useful for some overflow contents*/   
    }
    

    然后:

    <td class="td_size">
    

    将class属性放置到您想要的任何<td>

  • Jerry Lee #7
    我用这个/p
    .app_downloads_table tr td:first-child {
        width: 75%;
    }
    
    .app_downloads_table tr td:last-child {
        text-align: center;
    }
    
  • Elvis Lee #8

    这也有助于将width:auto放入最后一个“填充单元格”。这将占用剩余空间,并保留指定的所有其他维度。

  • Charlotte Lee #9

    如果不希望固定布局,请为列指定适当大小的类

    CSS:

    .special_column { width: 120px; }
    

    HTML格式:

    <td class="special_column">...</td>
    
  • Montague Lee #10

    卡森有正确的想法这是正确的代码

    <style type="text/css">
      th.first-col > div, 
      td.first-col > div {
        overflow:hidden;
        white-space:nowrap;
        width:100px
      }
    </style>
    
    <table>
      <thead><tr><th class="first-col"><div>really long header</div></th></tr></thead>
      <tbody><tr><td class="first-col"><div>really long text</div></td></tr></tbody>
    </table>
    
  • Hulda Lee #11

    当小于固定宽度时,对小屏幕做出接受的回答

    HTML格式:

    <table>
      <tr>
        <th>header 1</th>
        <th>header 234567895678657</th>
      </tr>
      <tr>
        <td>data asdfasdfasdfasdfasdf</td>
        <td>data 2</td>
      </tr>
    </table>
    

    CSS

    table{
        border: 1px solid black;
        table-layout: fixed;
        max-width: 600px;
        width: 100%;
    }
    
    th, td {
        border: 1px solid black;
        overflow: hidden;
        max-width: 300px;
        width: 100%;
    }
    

    JS小提琴

    https://jsfiddle.net/w9s3ebzt/

  • Murphy Lee #12

    根据我的回答here,也可以使用a表头(可以是空的)并对每个表头单元格应用相对宽度。表格中所有单元格的宽度将与其柱头的宽度一致。示例:

    HTML格式

    <table>
      <thead>
        <tr>
          <th width="5%"></th>
          <th width="70%"></th>
          <th width="15%"></th>
          <th width="10%"></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Some text...</td>
          <td>May 2018</td>
          <td>Edit</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Another text...</td>
          <td>April 2018</td>
          <td>Edit</td>
        </tr>
      </tbody>
    </table>
    

    CSS

    table {
      width: 600px;
      border-collapse: collapse;
    }
    
    td {
      border: 1px solid #999999;
    }
    

    View Result

    或者,按照hyashin的回答使用colgroup

  • Quintina Lee #13

    设置此:

    style="min-width:100px;" 
    

    为我工作

  • Gill Lee #14

    我发现KAsun的答案用vw比用px更好:

    [代码1]

    这是我唯一需要调整列宽的样式

  • Ann Lee #15

    您不需要设置"fixed"-您只需要设置overflow:hidden,因为列宽已设置