发表新帖
发表新帖

CSS table td width - fixed, not flexible

后端 未结
关注
8 1702
温柔的废话
温柔的废话 2020-12-12 19:55

I have a table and I want to set a fixed width of 30px on the td\'s. the problem is that when the text in the td is too long, the td is stretched out wider than 30px.

相关标签:
8条回答
  • 鱼传尺愫
    2020-12-12 19:57

    Just divide the number of td to 100%. Example, you have 4 td's:

    <html>
<table>
<tr>
<td style="width:25%">This is a text</td>
<td style="width:25%">This is some text, this is some text</td>
<td style="width:25%">This is another text, this is another text</td>
<td style="width:25%">This is the last text, this is the last text</td>
</tr>
</table>
</html>

    We use 25% in each td to maximize the 100% space of the entire table

    0 讨论(0)
  • 春和景丽
    2020-12-12 20:04

    It is not only the table cell which is growing, the table itself can grow, too. To avoid this you can assign a fixed width to the table which in return forces the cell width to be respected:

    table {
  table-layout: fixed;
  width: 120px; /* Important */
}
td {
  width: 30px;
}

    (Using overflow: hidden and/or text-overflow: ellipsis is optional but highly recommended for a better visual experience)

    So if your situation allows you to assign a fixed width to your table, this solution might be a better alternative to the other given answers (which do work with or without a fixed width)

    0 讨论(0)
  • 花落未央
    2020-12-12 20:04

    The above suggestions trashed the layout of my table so I ended up using:

    td {
  min-width: 30px;
  max-width: 30px;
  overflow: hidden;
}

    This is horrible to maintain but was easier than re-doing all the existing css for the site. Hope it helps someone else.

    0 讨论(0)
  • 花落未央
    2020-12-12 20:07

    This workaround worked for me...

    <td style="white-space: normal; width:300px;">
    0 讨论(0)
  • 栀梦
    2020-12-12 20:13

    It's not the prettiest CSS, but I got this to work:

    table td {
    width: 30px;
    overflow: hidden;
    display: inline-block;
    white-space: nowrap;
}

    Examples, with and without ellipses: 

    body {
    font-size: 12px;
    font-family: Tahoma, Helvetica, sans-serif;
}

table {
    border: 1px solid #555;
    border-width: 0 0 1px 1px;
}
table td {
    border: 1px solid #555;
    border-width: 1px 1px 0 0;
}

/* What you need: */
table td {
    width: 30px;
    overflow: hidden;
    display: inline-block;
    white-space: nowrap;
}

table.with-ellipsis td {   
    text-overflow: ellipsis;
}
    <table cellpadding="2" cellspacing="0">
    <tr>
        <td>first</td><td>second</td><td>third</td><td>forth</td>
    </tr>
    <tr>
        <td>first</td><td>this is really long</td><td>third</td><td>forth</td>
    </tr>
</table>

<br />

<table class="with-ellipsis" cellpadding="2" cellspacing="0">
    <tr>
        <td>first</td><td>second</td><td>third</td><td>forth</td>
    </tr>
    <tr>
        <td>first</td><td>this is really long</td><td>third</td><td>forth</td>
    </tr>
</table>

    0 讨论(0)
  • [愿得一人]
    2020-12-12 20:16

    Put a div inside td and give following style width:50px;overflow: hidden; to the div
    Jsfiddle link 

    <td>
  <div style="width:50px;overflow: hidden;"> 
    <span>A long string more than 50px wide</span>
  </div>
</td>
    0 讨论(0)
 看不清?
提交回复
热议问题