在突出显示的表格中防止有角度的边框答案

【问题标题】：Prevent angled borders in highlighted table在突出显示的表格中防止有角度的边框
【发布时间】：2015-12-10 13:28:03
【问题描述】：

考虑以下设置：

$(function() {
  var $cols = $("td:nth-child(2), th:nth-child(2)");
  $cols.hover(function() {
    $cols.addClass("highlight");
  }, function() {
    $cols.removeClass("highlight");
  });
});

div {
  background: #edf0f1;
  padding: 20px;
}
table {
  table-layout: fixed;
  width: 500px;
  border-collapse: separate;
  border-spacing: 0;
}
td {
  padding: 10px;
  background-color: #fff;
  border: 1px solid #edf0f1;
  border-right-width: 10px;
  border-left-width: 10px;
}
td.highlight,
th.highlight {
  border-right-color: black;
  border-left-color: black;
}
tr:last-child td {
  border-bottom-width: 10px;
}
tr:last-child td.highlight {
  border-bottom-color: black;
}
th {
  border: 1px solid #edf0f1;
  border-top-width: 10px;
  border-right-width: 10px;
  border-left-width: 10px;
}
th.highlight {
  border-top: 10px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <table>
    <thead>
      <tr>
        <th>Important</th>
        <th>Information</th>
        <th>Interchange</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Hello world, how are you today</td>
        <td>again</td>
        <td>and we're done</td>
      </tr>
      <tr>
        <td>More things</td>
        <td>Cow level is real!!1111</td>
        <td>over 9000%</td>
      </tr>
    </tbody>
  </table>
</div>

如您所见，突出显示的表格在悬停时从边框显示难看的“箭头”：

我怎样才能摆脱这些？

【问题讨论】：

这些颜色变淡的箭头是 td 单元格的边界顶部和边界底部的末端。您不能将边框的一部分绘制为一种颜色，而将部分边框绘制为另一种颜色。您将需要重新考虑整个 HTML 布局（您需要表格吗？或者 div 可以工作吗？）。
我尝试了 div，但我没有找到一种方法让它们像表格一样动态地处理文本长度的变化和中断。例如。当列文本变得大于它所拥有的空间时，整行将相应地调整大小。标题列等也是如此。据我发现，divs 在更改时无法更改其他divs 的高度...
问题是表格是基于行的，而你试图实现基于列的视觉效果。它只是行不通。您将能够得到的最接近的是这样的：jsfiddle.net/gep8c4jq 除非您编写一些非常复杂的 JavaScript（我不知道）来检测三个元素中的任何一个何时悬停，然后应用适当的风格各有千秋。如果您在问题中添加javascript 和/或jquery 标签，您可能会得到一些使用这些标签的解决方案。
仅供参考，将来会有另一种选择； CSS Grids：drafts.csswg.org/css-grid-1 它允许您按网格、列或行设置内容的样式和对齐内容，但在很长一段时间内将无法使用。
@TylerH 我找到了解决方案。无论如何感谢您的输入 :-) 无需等待 CSS 网格 :D

标签： html css html-table

【解决方案1】：

来，试试这个。边框越大，角度越明显。我将边框大小更改为 0px

小提琴：https://jsfiddle.net/uqdebsxp/

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <table>
    <thead>
      <tr>
        <th>Important</th>
        <th>Information</th>
        <th>Interchange</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Hello world</td>
        <td>again</td>
        <td>and we're done</td>
      </tr>
         <tr>
        <td>Hello world</td>
        <td>again</td>
        <td>and we're done</td>
      </tr>
      <tr>
        <td>More things to come</td>
        <td>over 9000%</td>
        <td>Cow level is real!</td>
      </tr>
    </tbody>
  </table>
</div>

css

    div {
  background: #edf0f1;
  padding: 20px;
}
table {
  table-layout: fixed;
  width: auto;
  border-collapse: separate;
  border-spacing: 0;
}
td {
  padding: 10px;
  background-color: #fff;
  border: 0px solid #edf0f1;
  border-right-width: 10px;
  border-left-width: 10px;
}
td.highlight,
th.highlight {
  border-right-color: black;
  border-left-color: black;
}
tr:last-child td {
  border-bottom-width: 10px;
}
tr:last-child td.highlight {
  border-bottom-color: black;
}
th {
  border: 0px solid #edf0f1;
  border-top-width: 10px;
  border-right-width: 10px;
  border-left-width: 10px;
}
th.highlight {
  border-top: 10px solid black;
}

【讨论】：

好的，但是我在行之间没有一条线，这是必需的。像这样，您无法真正区分每一列的行。
我找到了解决方案。无论如何感谢您的输入:-)

【解决方案2】：

您需要手动删除列中悬停项目上的borders，使用此CSS：

$(function() {
  var $cols = $("td:nth-child(2), th:nth-child(2)");
  $cols.hover(function() {
    $cols.addClass("highlight");
  }, function() {
    $cols.removeClass("highlight");
  });
});

div {
  background: #edf0f1;
  padding: 20px;
}
table {
  table-layout: fixed;
  width: auto;
  border-collapse: separate;
  border-spacing: 0;
}
td {
  padding: 10px;
  background-color: #fff;
  border: 1px solid #edf0f1;
  border-right-width: 10px;
  border-left-width: 10px;
}
td.highlight,
th.highlight {
  border-right-color: black;
  border-left-color: black;
}
tr:last-child td {
  border-bottom-width: 10px;
}
th {
  border: 1px solid #edf0f1;
  border-top-width: 10px;
  border-right-width: 10px;
  border-left-width: 10px;
}

   

/* New CSS */
tbody tr:first-child > td.highlight {
   border-bottom: 1px solid black;
   border-top: 1px solid black;
}
tr:last-child td.highlight {
    border-bottom-color: black;
    border-top: 1px solid;
}
th.highlight {
    border-top: 10px solid black;
    border-bottom: 1px solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <table>
    <thead>
      <tr>
        <th>Important</th>
        <th>Information</th>
        <th>Interchange</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Hello world</td>
        <td>again</td>
        <td>and we're done</td>
      </tr>
      <tr>
        <td>More things to come</td>
        <td>over 9000%</td>
        <td>Cow level is real!</td>
      </tr>
    </tbody>
  </table>
</div>

【讨论】：

与杰西的回答相同的问题；行之间的边界是更好地视觉识别数据所必需的。另外，像这样，列会在悬停时跳跃。
我不认为，如果不认真修改整个代码（即删除表格并转向基于列的布局），您的要求是不可能的，但我修改了我的 sn-p ，因为我认为这是尽可能接近的。基本上你不能改变你的bottom/top border 的一部分，这就是你试图做的。通过添加highlightclass，您只需修改它的右/左边框的“外部”宽度，这根本不会影响底部/顶部边框。您可以妥协，将水平边框分别更改为黑色，这就是我的建议。
删除表格的问题是divs 在文本变得太长时不会更改同一行中其他divs 的高度。这就是表格擅长的地方。此外，表格中的数据绝对最好显示为表格，因此我选择了“正确”的方式。
我完全理解你的理由 - 表格是用于表格数据的，我会坚持这一点，并且可能会修改你的设计决策，以考虑到在行中修改列（悬停时）的事实基于html element，你想要的方式，至少很难。这就是为什么我建议选择黑色水平边框。
我找到了解决方案。无论如何感谢您的输入:-)

【解决方案3】：

感谢所有好的答案。作为我，我对“它不起作用”并不满意，并找到了一种只需很小调整的方法，见下文。

$(function() {
  var $cols = $("table [data-col]");
  $cols.hover(function() {
    var colNum = $(this).data("col");
    $("[data-col=" + colNum + "]").addClass("highlight");
  }, function() {
    var colNum = $(this).data("col");
    $("[data-col=" + colNum + "]").removeClass("highlight");
  });
});

div {
  background: #edf0f1;
  padding: 20px;
}
table {
  table-layout: fixed;
  width: 500px;
  border-collapse: separate;
  border-spacing: 0;
}
td {
  vertical-align: top;
  padding: 0;
  background-color: #fff;
  border: 0px solid #edf0f1;
  border-right-width: 10px;
  border-left-width: 10px;
}
td > div, th > div {
  padding: 10px;
  border-top: 1px solid #edf0f1;
  background: none;
}
td.highlight,
th.highlight {
  border-right-color: black;
  border-left-color: black;
}
tr:last-child td {
  border-bottom-width: 10px;
}
tr:last-child td.highlight {
  border-bottom-color: black;
}
th {
  border: 0px solid #edf0f1;
  border-top-width: 10px;
  border-right-width: 10px;
  border-left-width: 10px;
}
th.highlight {
  border-top: 10px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <table>
    <thead>
      <tr>
        <th data-col="1"><div>Important</div></th>
        <th data-col="2"><div>Information</div></th>
        <th data-col="3"><div>Interchange</div></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td data-col="1"><div>Hello world, how are you today</div></td>
        <td data-col="2"><div>again</div></td>
        <td data-col="3"><div>and we're done</div></td>
      </tr>
      <tr>
        <td data-col="1"><div>More things</div></td>
        <td data-col="2"><div>Cow level is real!!1111</div></td>
        <td data-col="3"><div>over 9000%</div></td>
      </tr>
    </tbody>
  </table>
</div>

所需要的只是将内容包装到一个 div 中并稍微调整 CSS。

这样，我保留了表格的属性（包括动态行高），但仍然可以突出显示每列。希望它可以帮助某人。

【讨论】：

不错的一个 - 我正要建议 :) 但在我看来这有点开销。您是否在所有主要浏览器中都对此进行了测试？请注意此线程中提到的一些问题 - stackoverflow.com/questions/1110915/… 。现在已经有几年的历史了，所以浏览器的实现可能会发生巨大的变化。
@robjez 我在与我当前实现相关的那些方面对其进行了测试......如果某些高层认为 IE