html - 使用固定的表格布局调整数据表列

标签 html css

我有一个具有固定表格布局的表格。它看起来很好,除了一列,因为该列不显示两行数据。尽管有固定的表格布局,但其他列至少会自行调整。我需要解决这个问题的原因是因为这个表进入了 iframe。

这是它的样子。

enter image description here

客户电子邮件列超出了限制。我该如何解决这个问题?

表格

<table id="esignTable" border="0" cellspacing="0" cellpadding="0" style="width:100%;table-layout:fixed">
    <thead>
        <tr>
            <th align="center" class="fieldLabelCell">Line of Business</th>
            <th align="center" class="fieldLabelCell">Insured</th>
            <th align="center" width="15%" class="fieldLabelCell">Customer<br>Phone</th>
            <th align="center" width="16%" class="fieldLabelCell">Policy #</th>
            <th align="center" width="18%" class="fieldLabelCell">E-Sign<br>Created Date</th>
            <th align="center" width="12%" class="fieldLabelCell">Customer<br>Email</th>
            <th align="center" class="fieldLabelCell"># of E-Sign Documents</th>
        </tr>
    </thead>
    <tbody> ...

最佳答案

我发现了这个 CSS 技巧:

overflow-wrap: break-word; 

来自这个网站: CSS-Tricks

来自Chris Coyier

这将迫使长 URL 中断。我没有用你的东西试过,希望这有帮助。

关于html - 使用固定的表格布局调整数据表列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45019757/

相关文章:

jquery - div根据浏览器窗口大小显示

javascript - 将动画添加到 jQuery toggleClass() 的问题

javascript - Bootstrap 导航悬停

html - 从 ionic 元素内部删除填充 - Ionic 2 AngularJS 2

html - 在 rails 中定义 anchor 标记的正确方法是什么?

html - 一线伪元素的独生子伪类

javascript - 如何调整同位素元素的设置高度

html - 在 HTML5 中包括大写锁定检测

javascript - Javascript onClick show div : Unexpected behavior. 浏览器窗口垂直向上滚动

html - 删除 Chrome 和 Safari 浏览器中 html5 视频顶部和底部的黑条