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

Question

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

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

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

10 117

html css css-tables border

10 ответов:

спасибо всем, что откликнулись! Я пробовал все решения, представленные здесь, и я сделал больше поиска в интернете для других возможных решений, и я думаю, что нашел один, который обещает:
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>
выход:

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

51

если вы выберите 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>
выход:

34

Я просто играл с этим тоже, и это казалось лучшим вариантом для меня:
<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?) это может сработать для тех. : - (

8

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

3

группировать строки вместе с помощью <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 в стиле.css
.red-outline {
  outline: 1px solid red;
}

2

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

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

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

1

трюк с контур собственность спасибо ответ загадки С небольшими изменениями

использовать этот класс
.row-border{
    outline: thin solid black;
    outline-offset: -1px;
}
тогда в HTML
<tr>....</tr>
<tr class="row-border">
    <td>...</td>
    <td>...</td>
</tr>
и в результате надеюсь, это поможет вам

0

более простой способ-сделать таблицу серверным элементом управления. Вы могли бы использовать что-то вроде этого:
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

-4

enigment · Accepted Answer · 2013-06-04 19:16:04

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