在 Firefox 和 IE 中无法通过表格单元格的左边框答案

【问题标题】：Border-left for table cell not coming through in Firefox and IE在 Firefox 和 IE 中无法通过表格单元格的左边框
【发布时间】：2023-04-04 03:15:01
【问题描述】：

我正在尝试为表格单元格提供左边框。它在 Chrome 中运行良好，但在 Firefox 和 IE 中不显示边框。

我在文档中看到左右边框没有得到广泛支持，但也许有一种解决方法，或者我在代码中做错了什么。

奇怪的是，我的表格中有圆形边框，有左边框和下边框，它们在每个浏览器上都显示得很好。

以下是相关代码：

<tr class="Panel_Middle_Row">
    <td class="Panel_Middle_Left_Cell" width="20"></td>
    <td class="Panel_Middle_Middle_Cell">blablabla</td>
    <td class="Panel_Middle_Right_Cell"></td>
</tr>

以及相应的css：

.Panel_Middle_Left_Cell {
  width: 20px;
  border-left-style:solid;
  border-left-color:#CCC;
  border-left-width:2px;
}
.Panel_Middle_Right_Cell {
  width: 20px;
  border-right-style:solid;
  border-right-color:#CCC;
  border-right-width:2px;*/
}

你可以找到一个例子here。

【问题讨论】：

放在行上？？并做一个像border-left：2px solid #ccc;这样的速记

标签： html css html-table border

【解决方案1】：

您的td 为空，因此不会显示。添加&nbsp;。

或将其添加到您的表类中：empty-cells: show;

【讨论】：

添加“空单元格：显示；”确实适用于FF，谢谢！但在 IE 中没有区别
您尝试过吗？空单元格仅在不处于 quirk 模式时适用于 IE8+（您的网页属于 quirkmode。除非您想为 IE6 编写代码，否则您应该在页面中添加 doctype。）

【解决方案2】：

试试这个：

<!DOCTYPE html>
<html>
<head>
<style>    
td.Panel_Middle_Left_Cell {
  width: 20px;
  border-left-style:solid;
  border-left-color:#CCC;
  border-left-width:2px;
}

td.Panel_Middle_Right_Cell {
  width: 20px;
  border-right-style:solid;
  border-right-color:#CCC;
  border-right-width:2px;
}
</style>
</head>

<body>
<table>
<tr class="Panel_Middle_Row">
    <td class="Panel_Middle_Left_Cell">jcjgcjgc</td>
    <td class="Panel_Middle_Middle_Cell">blablabla</td>
    <td class="Panel_Middle_Right_Cell"></td>
</tr>
</table>
</body>
</html>

【讨论】：