CSS table td width - fixed, not flexible

2019-01-21 05:31发布

站内问答 / HTML/CSS
424 8 4

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. Overflow:hidden doesnt work either on the td's, I need some way of hiding the overflowing text and keeping the td width 30px.

<table cellpadding="0" 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>

标签： html css Table
举报
8条回答
Emotional °昔
2楼-- · 2019-01-21 05:48

you also can try to use that:

table {
    table-layout:fixed;
}
table td {
    width: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
}

http://www.w3schools.com/cssref/pr_tab_table-layout.asp

查看更多
0人赞 添加讨论(0) 举报
Anthone
3楼-- · 2019-01-21 05:50

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) 举报
劳资没心，怎么记你
4楼-- · 2019-01-21 05:51

This workaround worked for me...

<td style="white-space: normal; width:300px;">
查看更多
0人赞 添加讨论(0) 举报
The star\"
5楼-- · 2019-01-21 06:06

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) 举报
对你真心纯属浪费
6楼-- · 2019-01-21 06:06

Chrome 37. for non fixed table:

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

first two important! else - its flow away!

查看更多
0人赞 添加讨论(0) 举报
爷、活的狠高调
7楼-- · 2019-01-21 06:08

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) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)