繁体   English   中英

如何根据文本长度制作表td tr自动宽度?

[英]How to make table td tr auto width based on text length?

我有一个宽度为100%的表,如何根据文本长度自动宽度设置TD和TR? 我使用宽度:自动但它不起作用。 这是我的代码:

 .hoverTable { width: 100%; border-collapse: collapse; } .hoverTable td { padding: 7px; border: #4e95f4 1px solid; } /* Define the default color for all the table rows */ .hoverTable tr { background: #b8d1f3; } /* Define the hover highlight color for the table row */ .hoverTable tr:hover { background-color: #ffff99; } .hoverTable th { background: #b8d1f3; } 
 <table class="hoverTable"> <tr> <th colspan="3">Some Text here</th> </tr> <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';"> <td>This is text length example and text</td> <td>Item 1B</td> <td>Item 1C</td> </tr> <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';"> <td>Item 2A</td> <td>Item 2B</td> <td>Item 2C</td> </tr> <th colspan="3" class="width: 100%;">Some Text here</th> <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';"> <td>Item 3A</td> <td>Item 3B</td> <td>Item 3C</td> </tr> <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';"> <td>Item 4A</td> <td>Item 4B</td> <td>Item 4C</td> </tr> <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';"> <td>Item 5A</td> <td>Item 5B</td> <td>Item 5C</td> </tr> </table> 

正如您在文本长度示例和文本中看到的那样,宽度不是基于文本长度,如何根据文本长度设置宽度。

我的意思是基于文本长度的自动宽度?

谢谢

使用以下内容:

.hoverTable {
    border-collapse: collapse;
}

所以只需删除width: 100%; 它会起作用。 该表现在将动态呈现。

小提琴: 点击

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM