Межі навколо конкретних рядків у таблиці?

120

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

Примітка: мені потрібно мати кілька обмежених ділянок. Основна ідея - мати кілька обмежених кластерів, кожен з яких містить кілька рядків.

— Кайл Кронін
джерело

9

Поза темою, але я просто хотів сказати, таблиці цілком підходять і рекомендуються при відображенні табличних даних ...

— md1337

114

Як щодо tr {outline: thin solid black;}? Працює для мене на елементах tr або tbody і, здається, сумісний з більшістю браузерів, включаючи IE 8+, але не раніше.

— загадка
джерело

Я запитував про те, щоб поставити одну таблицю навколо декількох рядків у таблиці, фактично візуально розділивши її на кілька розділів, але всередині однієї таблиці, щоб матеріали з різних розділів вирівнялися.

— Кайл Кронін

3

Зрозумів, мені це теж було потрібно. Прикладіть набір рядків, до яких потрібно встановити межу, у власному корпусі, і вищевказаний css створить межу навколо їх набору, тобто верхню межу у верхньому рядку, нижню межу в нижньому рядку та ліву і праві межі з усіма рядами в тілі. Межі насправді не "на" цих рядках, вони накреслюють тіло самого тіла, просто намагаються описати ефект.

— загадка

О, я бачу, кілька tbodys - це працює, і це те, що я не розглядав. Upvoted :)

— Kyle Cronin

Я б запропонував використовувати властивість nth-child () css, а не визначати tbodys, якщо ви дійсно не маєте досить динамічних даних. Використовуючи nth-child (), nth-last-child (), а не (), ви можете вибрати будь-які рядки / комірки, які ви хочете (доки ви знаєте відносні показники речей у таблиці). Наприклад, ви можете вибрати всі рядки, окрім двох верхніх і нижнього, з tr: not (: nth-child (-n + 2)): not (: nth-last-child (1))

— BT

1

Зауважте, що контур не має можливості облямувати конкретні сторони елемента. Наприклад, немає "контуру". Це обмежене рішення

— BT

53

Дякую всім, хто відгукнувся! Я спробував усі рішення, представлені тут, і більше шукав в Інтернеті інших можливих рішень, і, думаю, знайшов таке, що є перспективним:

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>між ними. Чи щось не так у цьому рішенні? Чи варто мати на увазі якісь кросплатформові проблеми?

— Кайл Кронін
джерело

Щойно пройшов тест за допомогою браузерних знімків, і схоже, що IE (усі версії) не подобаються атрибути першої дитини та останньої дитини. : - /

— Кайл Кронін

1

Виглядає як IE 7 і 8 підтримки першу дитину, але ні підтримки останнього дитини-(!) Msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx

— mechanical_meat

cellspacingАтрибут є застарілим в HTML5. Здається, CSS table { border-collapse: collapse; border-spacing: 0; }- це шлях зараз.

— Стефан ван ден Аккер

36

Якщо ви встановите 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

— Схід сонця
джерело

8

Я просто грав разом із цим, і це, здавалося, було найкращим варіантом для мене:

<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?), Які можуть працювати для них. :-(

— Саймон Іст
джерело

6

Це рішення невірне: "display: table" розміщує весь рядок в одній комірці таблиці --- ви втрачаєте форматування відносно інших рядків таблиці. Я спробував це в Firefox та Chromium.

— Яків Бельч

Яаков, я думаю, що ви маєте на увазі те, що ширина стовпців з текучим середовищем більше не співпадає з іншими рядками таблиці (як це видно в цьому скрипці: jsfiddle.net/MrKtw ), але форматування рамки / кольорів все ще працює добре. Рішення полягає в тому, щоб надати TR і TD задану ширину (або px, або%).

— Саймон Схід

Саймоне, щоб показати, що я маю на увазі, я розпрощався і змінив твою загадку. Подивіться на це: jsfiddle.net/a6DZV --- я застосовую форматування "display: table" лише до одного рядка. Як бачите, цей рядок ефективно перетворює цей рядок в одну клітинку таблиці. Іншими словами: Ви отримуєте той самий вихід, що і вкладення однорядних таблиць всередині комірки іншої таблиці (і показує межу цієї внутрішньої таблиці). Ваше рішення економить кілька вузлів у DOM, але воно не настільки сумісне.

— Яків Бельч

3

Ось підхід із використанням елементів 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>

— sipwiz
джерело

2

Згрупуйте рядки разом за допомогою <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;
}

— csi
джерело

1

Єдиний інший спосіб, який я можу зробити, це зробити це - укласти кожну з рядків, які вам потрібні для облямівки, у вкладену таблицю. Це полегшить облямівку, але потенційно створить інші проблеми з компонуванням, вам доведеться вручну встановити ширину на комірки таблиці тощо.

Ваш підхід цілком може бути найкращим, залежно від інших вимог компонування, і запропонований тут підхід є лише можливою альтернативою.

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

— sipwiz
джерело

Дякую за вашу відповідь; Ти маєш рацію щодо проблем із компонуванням - я вважаю за краще, щоб стовпці вибудовувались, не роблячи це вручну. Що щодо застосування класу до тегу <tr> - чи можливо це?

— Кайл Кронін

Якщо ви використовуєте таблицю з "макетом таблиці: фіксований" і явно встановлюєте ширину кожного стовпця (використовуючи <col> або просто встановивши ширину комірок у першому рядку), стовпці будуть розташовуватися у рядку незалежно від вмісту. Вам навіть не потрібно вкладати таблиці, три окремі таблиці будуть добре робити приклад.

— bobince

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

Здається, ви просто додаєте класи до тегів td? Чому цього не можна зробити за допомогою сценарію на стороні сервера, сформованого статично або в гіршому випадку просто вручну? Схоже, на мене зловживають JavaScript.

— Томас

3

Насправді плакат ЗАПИТАНО рішення Javascript. Ви не можете сказати, що це зловживання Javascript, оскільки інформації недостатньо. Наприклад, чи додаються межі через натискання користувачем? Якщо так, серверне рішення неправильне.

— клент

Вибачте за відсутність інформації. Це буде згенеровано на стороні сервера, так що це правда, що я міг просто додавати в класи вручну, але мені подобається, як рішення JS забезпечує більш простий інтерфейс для цього. Тому, хоча я, мабуть, не піду з JS, це добре рішення.

— Кайл Кронін

0

хитрість полягає у властивості контуру завдяки відповіді загадки з невеликою модифікацією

використовувати цей клас

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

потім у HTML

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

і результат - надія, що це вам допоможе

— Башеер AL-MOMANI
джерело

-5

Простіший спосіб - зробити таблицю керуванням стороною сервера. Ви можете використовувати щось подібне до цього:

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

— Кертіс
джерело

1

ОП просить простіший спосіб зробити це

— orique

2

Будьте обережні, OP також просить простіший спосіб зробити це в HTML / CSS. Я ніде не бачу в його питанні ключового слова VB чи VBA. Я пропоную вам переглянути наш Довідковий розділ: stackoverflow.com/help/how-to-answer Удачі.

— ForceMagic