html - 将 html TD 宽度设置为字符数

标签 html css html-table

我想将 TD 宽度设置为字符数,例如,如果我设置为 11,则只能显示 11 个字符,其余必须在新行中。我尝试了 width 属性,但它在不同的浏览器/分辨率下显示不同。

<table border="1">
    <tr>
<td>test1</td>
<td>CRTAX_G</td>
    <td>
    28-FEB-2013, 11-MAR-2013, 13-MAR-2013
    </td>
    </tr>
<tr>
<td>test1</td>
<td>CRTAX_G</td>
    <td>
    28-FEB-2013, 11-MAR-2013, 13-MAR-2013
    </td>
    </tr>
<tr>
<td>test1</td>
<td>CRTAX_G</td>
    <td>
    28-FEB-2013, 04-MAR-2013, 05-MAR-2013, 07-MAR-2013, 11-MAR-2013, 13-MAR-2013, 12-MAR-2013, 08-MAR-2013, 06-MAR-2013
    </td>
    </tr>
<tr>
<td>test1</td>
<td>CRTAX_G</td>
    <td>
    28-FEB-2013, 11-MAR-2013, 13-MAR-2013
    </td>
    </tr>
<tr>
<td>test1</td>
<td>CRTAX_G</td>
    <td>
    28-FEB-2013, 06-MAR-2013, 08-MAR-2013, 12-MAR-2013, 13-MAR-2013, 11-MAR-2013, 07-MAR-2013, 05-MAR-2013, 01-MAR-2013
    </td>
    </tr>
    <table>

将表格中的日期显示在一行中,

28-FEB-2013, 06-MAR-2013, 08-MAR-2013, 12-MAR-2013, 

我希望它显示为

   28-FEB-2013,
   11-MAR-2013,
   13-MAR-2013,

每个日期都必须换行。

最佳答案

我能想到的最简单的解决方案是:

table tr td+td+td {
  font-size: 100%;
  font-family: monospace;
  width: 8em;
}

http://jsbin.com/elaleg/1/edit

关于html - 将 html TD 宽度设置为字符数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15404133/

相关文章:

jquery - 更改子元素悬停时的父元素背景位置

HTML 内容超出 CSS 高度

html - 如何在同一行上获得此 'a' 链接和 'input' 按钮? CSS

javascript - 在 javascript 之上显示 html 按钮

javascript - 360 度图像旋转指示器

javascript - 更改 HTML 对象标签内加载的输入值,可能吗?

javascript - 显示滚动区域外的元素

jquery - 使用 jQuery 每个函数生成表行

css - 站点基础 : min width/fixed table column

jquery - 使用 .replaceWith 删除 <p> 标签但将内容保留在标签内?