Граница вокруг определенных строк в таблице?

StackOverflow https://stackoverflow.com/questions/670424

  •  21-08-2019
  •  | 
  •  

Вопрос

Я пытаюсь разработать какой-нибудь HTML / CSS, который может обводить рамкой определенные строки в таблице.Да, я знаю, что на самом деле я не должен использовать таблицы для верстки, но я пока недостаточно знаю CSS, чтобы полностью заменить его.

В любом случае, у меня есть таблица с несколькими строками и столбцами, некоторые из которых объединены с rowspan и colspan, и я хотел бы обвести части таблицы простой рамкой.В настоящее время я использую 4 отдельных CSS-класса (верхний, нижний, левый, правый), которые я прикрепляю к <td> ячейки, расположенные в верхней, нижней, левой и правой частях таблицы соответственно.

.top {
  border-top: thin solid;
  border-color: black;
}

.bottom {
  border-bottom: thin solid;
  border-color: black;
}

.left {
  border-left: thin solid;
  border-color: black;
}

.right {
  border-right: thin solid;
  border-color: black;
}
<html>

<body>

  <table cellspacing="0">
    <tr>
      <td>no border</td>
      <td>no border here either</td>
    </tr>
    <tr>
      <td class="top left">one</td>
      <td class="top right">two</td>
    </tr>
    <tr>
      <td class="bottom left">three</td>
      <td class="bottom right">four</td>
    </tr>
    <tr>
      <td colspan="2">once again no borders</td>
    </tr>
    <tr>
      <td class="top bottom left right" colspan="2">hello</td>
    </tr>
    <tr>
      <td colspan="2">world</td>
    </tr>
  </table>

</html>

Есть ли какой-нибудь более простой способ сделать то, что я хочу?Я попробовал нанести верх и низ на <tr> но это не сработало.(p.s.Я новичок в CSS, так что, вероятно, есть действительно простое решение для этого, которое я пропустил.)

примечание: Мне действительно нужно иметь несколько разделов с границами.Основная идея состоит в том, чтобы иметь несколько окаймленных кластеров, каждый из которых содержит несколько строк.

Это было полезно?

Решение

Как насчет tr {outline: thin solid black;}?Работает для меня с элементами tr или tbody, и появляется должен быть совместим с большинством браузеров, включая IE 8+, но не раньше.

Другие советы

Спасибо всем, кто откликнулся!Я перепробовал все представленные здесь решения, а также поискал в Интернете другие возможные решения и, думаю, нашел многообещающее:

tr.top td {
  border-top: thin solid black;
}

tr.bottom td {
  border-bottom: thin solid black;
}

tr.row td:first-child {
  border-left: thin solid black;
}

tr.row td:last-child {
  border-right: thin solid black;
}
<html>

<head>
</head>

<body>

  <table cellspacing="0">
    <tr>
      <td>no border</td>
      <td>no border here either</td>
    </tr>
    <tr class="top row">
      <td>one</td>
      <td>two</td>
    </tr>
    <tr class="bottom row">
      <td>three</td>
      <td>four</td>
    </tr>
    <tr>
      <td colspan="2">once again no borders</td>
    </tr>
    <tr class="top bottom row">
      <td colspan="2">hello</td>
    </tr>
    <tr>
      <td colspan="2">world</td>
    </tr>
  </table>

</body>

</html>

Выходной сигнал:

enter image description here

Вместо того, чтобы добавлять top, bottom, left, и right занятия для каждого <td>, все, что мне нужно сделать, это добавить top row на самый верх <tr>, bottom row до самого дна <tr>, и row к каждому <tr> в промежутке.Есть ли что-то неправильное в этом решении?Есть ли какие-либо кроссплатформенные проблемы, о которых я должен знать?

Если вы установите border-collapse стиль для collapse в родительской таблице вы должны иметь возможность стилизовать tr:(стили встроены для демо-версии) 

<table style="border-collapse: collapse;">
  <tr>
    <td>No Border</td>
  </tr>
  <tr style="border:2px solid #f00;">
    <td>Border</td>
  </tr>
  <tr>
    <td>No Border</td>
  </tr>
</table>

Выходной сигнал:

HTML output

Я тоже просто забавлялся с этим, и это показалось мне лучшим вариантом для меня:

<style>
    tr { 
        display: table;            /* this makes borders/margins work */
        border: 1px solid black;
        margin: 5px;
    }
</style>

Обратите внимание , что это предотвратит использование жидкости/автоматической ширины колонны, поскольку ячейки больше не будут совпадать с ячейками в других строках, но форматирование границ / цвета по-прежнему работает нормально.Решение состоит в том, чтобы присвойте TR и TDs заданную ширину (либо в пикселях, либо в %).

Конечно, вы могли бы сделать селектор tr.myClass если бы вы хотели применить его только к определенным строкам.Очевидно display: table однако это не работает для IE 6/7, но, вероятно, есть другие хаки (hasLayout?) которые могли бы сработать для них.:-(

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

<table cellspacing="0">  
    <tbody>
        <tr>    
            <td>no border</td>    
            <td>no border here either</td>  
        </tr>  
    <tbody bgcolor="gray">
        <tr>    
            <td>one</td>    
            <td>two</td>  
        </tr>  
        <tr>    
            <td>three</td>    
            <td>four</td>  
        </tr>  
    <tbody>
        <tr>    
             <td colspan="2">once again no borders</td>  
        </tr>  
    <tbody bgcolor="gray">
        <tr>    
             <td colspan="2">hello</td>  
        </tr>
    <tbody>
    <tr>    
         <td colspan="2">world</td>  
    </tr>
</table>

Сгруппируйте строки вместе, используя <tbody> отметьте, а затем примените стиль.

<table>
  <tr><td>No Style here</td></tr>
  <tbody class="red-outline">
    <tr><td>Style me</td></tr>
    <tr><td>And me</td></tr>
  </tbody>
  <tr><td>No Style here</td></tr>
</table>

И css в style.css

.red-outline {
  outline: 1px solid red;
}

Единственный другой способ, который я могу придумать, чтобы сделать это, - заключить каждую из строк, которые вам нужны, в рамку во вложенной таблице.Это упростит создание границы, но потенциально создаст другие проблемы с макетом, вам придется вручную устанавливать ширину ячеек таблицы и т.д.

Ваш подход вполне может быть лучшим в зависимости от ваших других требований к макету, и предлагаемый здесь подход - всего лишь возможная альтернатива.

<table cellspacing="0">  
    <tr>    
        <td>no border</td>    
        <td>no border here either</td>  
    </tr>  
    <tr>
        <td>
             <table style="border: thin solid black">
                  <tr>    
                        <td>one</td>    
                        <td>two</td>  
                  </tr>  
                  <tr>    
                      <td>three</td>    
                      <td>four</td>  
                  </tr>  
             </table>
         </td>
    </tr>
    <tr>    
         <td colspan="2">once again no borders</td>  
    </tr>  
    <tr>
        <td>
             <table style="border: thin solid black">
                  <tr>    
                        <td>hello</td>  
                   </tr>
             </table>
         </td>
    </tr>
    <tr>    
         <td colspan="2">world</td>  
    </tr>
</table>

Основываясь на вашем требовании о том, что вы хотите обвести рамкой произвольный блок ячеек MxN, на самом деле нет более простого способа сделать это без использования Javascript.Если ваши ячейки зафиксированы с помощью, вы можете использовать значения с плавающей точкой, но это проблематично по другим причинам.то, что вы делаете, может быть утомительным, но это нормально.

Хорошо, если вас интересует решение на Javascript, использующее jQuery (мой предпочтительный подход), в итоге вы получите этот довольно пугающий фрагмент кода:

<html>
<head>

<style type="text/css">
td.top { border-top: thin solid black; }
td.bottom { border-bottom: thin solid black; }
td.left { border-left: thin solid black; }
td.right { border-right: thin solid black; }
</style>
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<script type="text/javascript">
$(function() {
  box(2, 1, 2, 2);
});

function box(row, col, height, width) {
  if (typeof height == 'undefined') {
    height = 1;
  }
  if (typeof width == 'undefined') {
    width = 1;
  }
  $("table").each(function() {
    $("tr:nth-child(" + row + ")", this).children().slice(col - 1, col + width - 1).addClass("top");
    $("tr:nth-child(" + (row + height - 1) + ")", this).children().slice(col - 1, col + width - 1).addClass("bottom");
    $("tr", this).slice(row - 1, row + height - 1).each(function() {
      $(":nth-child(" + col + ")", this).addClass("left");
      $(":nth-child(" + (col + width - 1) + ")", this).addClass("right");
    });
  });
}
</script>
</head>
<body>

<table cellspacing="0">
  <tr>
    <td>no border</td>
    <td>no border here either</td>
  </tr>
  <tr>
    <td>one</td>
    <td>two</td>
  </tr>
  <tr>
    <td>three</td>
    <td>four</td>
  </tr>
  <tr>
    <td colspan="2">once again no borders</td>
  </tr>
</tfoot>
</table>
</html>

Я с радостью приму предложения о более простых способах сделать это...

хитрость заключается в том, что свойство контура благодаря ответ энигмента с небольшими изменениями

используйте этот класс 

.row-border{
    outline: thin solid black;
    outline-offset: -1px;
}

затем в HTML

<tr>....</tr>
<tr class="row-border">
    <td>...</td>
    <td>...</td>
</tr>

и в результате получается enter image description here надеюсь, это поможет вам

Более простой способ - сделать таблицу элементом управления на стороне сервера.Вы могли бы использовать что-то похожее на это:

Dim x As Integer
table1.Border = "1"

'Change the first 10 rows to have a black border
 For x = 1 To 10
     table1.Rows(x).BorderColor = "Black"
 Next

'Change the rest of the rows to white
 For x = 11 To 22
     table1.Rows(x).BorderColor = "White"
 Next
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top