Question

我正在使用html表。为了提高可读性，我希望当前行为粗体。我这样做：

.displayTable tr:hover { color: #000000; font-weight: bold; }

但表格单元格改变了它们的宽度，当我将内容填充整个单元格的行悬停时，整个表格会调整大小（因为粗体文本会占用更多空间）。那么如何通过使细胞像粗体一样宽，而不是粗体来阻止这种情况呢？

Answer 1

您可以使用text-shadow效果给出类似粗体的风格，例如

td:hover {
  text-shadow:  0 0 1px #999;  
}

所以它不会影响文本的宽度。示例代码：http://codepen.io/anon/pen/cEqJK

Answer 2

我不确定这个问题是否有理想的HTML / CSS解决方案，因此我使用了一些JavaScript来解决它。

结果可在this fiddle中找到。

HTML：

<table class="displayTable">
    <tr><td>Row 1, Col 1</td><td>Row 1, Col 2</td></tr>
    <tr><td>Row 2, Col 1</td><td>Row 2, Col 2</td></tr>
</table>

CSS：

.displayTable {
    border: 1px solid #000;
}

.displayTable td {
    border: 1px solid #000;
}

.displayTable tr:hover { color: #000000; font-weight: bold; }

JavaScript（使用jQuery）：

$(function() {
    var td = $(".displayTable tr td");

    td.css("font-weight", "bold");

    td.each( function () {
        var width = $(this).width(),
            height = $(this).height();
        $(this).css("width", width+"px");
        $(this).css("height", height+"px");
    });

    td.css("font-weight", "");
});

在我的代码中，在页面加载时，JavaScript基本上将font-weight设置为粗体，检查td元素的宽度和高度，并将它们的宽度和高度属性设置为这些值，然后删除font-weight属性，使其返回到样式表为其设置的任何内容（如果有的话）。这应该有用。

Answer 3

使您的表格大小为静态。将width和height添加到<td>。

Fiddle Demo

<强> HTML

<table class="displayTable">
    <tr>
        <td>Hello</td>
        <td>Word</td>
    </tr>
    <tr>
        <td>Hello</td>
        <td>Word</td>
    </tr>
</table>

<强> CSS

.displayTable tr:hover {
     color: #000000; 
    font-weight: bold;    
}
tr{ background:yellow; }
td{
     width:100px;
    height:50px;
    text-align:center;
}

Answer 4

好吧，我试着记住，每个td中填充的文字都会很长很短。因此，我使用单独的div来绑定文本，并将overflow设置为width and height

的基础td

div{
    width:100px;
    height:50px;
    overflow-y:scroll;

}
td{
    padding:5px;
}

tr:hover{

    font-weight:bolder;
    color:red;
}

这是一个示例fiddle

使包含普通文本的td与粗体一样宽

4 个答案:

Fiddle Demo