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

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

118 голосов
/ 22 марта 2009

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

В любом случае, у меня есть таблица с несколькими строками и столбцами, некоторые из которых объединены со строками строк и кольцами, и я хотел бы поместить простую рамку вокруг частей таблицы. В настоящее время я использую 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>, но это не сработало. (с. Я новичок в CSS, так что, возможно, есть действительно простое решение, которое я пропустил.)

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

Ответы [ 10 ]

111 голосов
/ 04 июня 2013

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

51 голосов
/ 22 марта 2009

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

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> между ними. Что-то не так с этим решением? Есть ли какие-то кроссплатформенные проблемы, о которых мне следует знать?

35 голосов
/ 22 ноября 2012

Если вы установите стиль 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

8 голосов
/ 09 января 2012

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

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

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

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

3 голосов
/ 22 марта 2009

Вот подход, использующий элементы 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>
2 голосов
/ 22 февраля 2014

Сгруппируйте строки, используя тег <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;
}
1 голос
/ 22 марта 2009

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

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

<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>
1 голос
/ 22 марта 2009

Исходя из вашего требования, что вы хотите поместить границу вокруг произвольного блока ячеек 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>

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

0 голосов
/ 26 января 2017

трюк с свойством структуры благодаря ответу enigment с небольшой модификацией

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

.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 надеюсь, что это поможет вам

0 голосов
/ 10 июля 2013

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

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