Предотвращение угловых границ в выделенной таблице

Рассмотрим следующую настройку: 

$(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>

Как вы можете видеть, выделенная таблица показывает уродливые "стрелки" от границ при наведении курсора:

Пограничные стрелки

Как я могу избавиться от них?

3 2
html css html-table

3 ответа:

Вот, попробуйте это.. чем больше граница, тем более выражен угол. Я изменил размер границы на 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;
}
1

Вам нужно будет вручную удалить 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>
0

Спасибо за все хорошие ответы. Будучи собой, я не был удовлетворен "это не работает" и нашел способ с очень небольшими корректировками, см. ниже.

$(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.

Таким образом, я сохраняю свойства таблицы (включая динамическую высоту строки), но все еще могу выделить каждый столбец. Надеюсь, это кому-то поможет.

0