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

Я пытаюсь создать некоторый 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>

Ответ 1

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

Ответ 2

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

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>

Ответ 3

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

Вывод:

Ответ 4

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

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

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

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

Ответ 5

Здесь используется подход с использованием элементов 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>

Ответ 6

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

Я с радостью расскажу о более простых способах этого сделать...

Ответ 7

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

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

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

Ответ 8

Группируйте строки вместе с помощью тега <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;
}

Ответ 9

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

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

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

то в HTML

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

и результат надеюсь, это поможет вам

Ответ 10

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

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