Закруглені кути таблиці лише CSS

Я шукав і шукав, але не зміг знайти рішення для моєї вимоги.

У мене проста звичайна HTML-таблиця. Я хочу для нього круглі кути, без використання зображень або JS, тобто лише чистого CSS . Подобається це:

Закруглені кути для кутових комірок та 1pxтовста облямівка для комірок.

Поки що я маю таке:

table {
  -moz-border-radius: 5px !important;
  border-collapse: collapse !important;
  border: none !important;
}
table th,
table td {
  border: none !important
}
table th:first-child {
  -moz-border-radius: 5px 0 0 0 !important;
}
table th:last-child {
  -moz-border-radius: 0 5px 0 0 !important;
}
table tr:last-child td:first-child {
  -moz-border-radius: 0 0 0 5px !important;
}
table tr:last-child td:last-child {
  -moz-border-radius: 0 0 5px 0 !important;
}
table tr:hover td {
  background-color: #ddd !important
}

Але це залишає мене без будь-яких кордонів для клітин. Якщо я додаю межі, вони не округляються!

Будь-які рішення?

Здається, чудово працює у FF та Chrome (не тестував жодного іншого) з окремими межами: http://jsfiddle.net/7veZQ/3/

Редагувати: Ось відносно чітка реалізація вашого ескізу:

table {
    border-collapse:separate;
    border:solid black 1px;
    border-radius:6px;
    -moz-border-radius:6px;
}

td, th {
    border-left:solid black 1px;
    border-top:solid black 1px;
}

th {
    background-color: blue;
    border-top: none;
}

td:first-child, th:first-child {
     border-left: none;
}

<table>
    <thead>
    <tr>
        <th>blah</th>
        <th>fwee</th>
        <th>spoon</th>
    </tr>
    </thead>
    <tr>
        <td>blah</td>
        <td>fwee</td>
        <td>spoon</td>
    </tr>
    <tr>
        <td>blah</td>
        <td>fwee</td>
        <td>spoon</td>
    </tr>
</table>

http://jsfiddle.net/MuZzz/3577/

Для мене рішення Bootstrap Twitter виглядає добре. Це виключає IE <9 (у IE 8 і нижче немає круглих кутів), але це нормально, я думаю, якщо ви розробляєте перспективні Web-Apps.

CSS / HTML:

table { 
    border: 1px solid #ddd;
    border-collapse: separate;
    border-left: 0;
    border-radius: 4px;
    border-spacing: 0px;
}
thead {
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit;
    border-collapse: separate;
}
tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}
th, td {
    padding: 5px 4px 6px 4px; 
    text-align: left;
    vertical-align: top;
    border-left: 1px solid #ddd;    
}
td {
    border-top: 1px solid #ddd;    
}
thead:first-child tr:first-child th:first-child, tbody:first-child tr:first-child td:first-child {
    border-radius: 4px 0 0 0;
}
thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td:first-child {
    border-radius: 0 0 0 4px;
}

<table>
  <thead>
    <tr><th>xxx</th><th>xxx</th><th>xxx</th></tr>
  </thead>
  <tbody>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
  </tbody>
</table>

Ви можете грати з цим тут (на jsFiddle)

По-перше, вам знадобиться не просто, -moz-border-radiusякщо ви хочете підтримувати всі браузери. Ви повинні вказати всі варіанти, включаючи звичайний border-radius, наступним чином:

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

По-друге, щоб прямо відповісти на ваше запитання, border-radius насправді не відображається межа; він просто встановлює, як виглядають кути межі, якщо вона є.

Щоб увімкнути межу і, таким чином, отримати закруглені кути, вам також потрібен borderатрибут your tdта thелементи.

td, th {
   border:solid black 1px;
}

Ви також побачите закруглені кути, якщо у вас колір фону (або графіки), хоча, звичайно, він повинен мати інший колір фону, ніж оточуючий елемент, щоб закруглені кути були видні без межі.

Варто зазначити, що деякі старі браузери не люблять розміщувати border-radiusтаблиці / комірки таблиці. Можливо, варто помістити <div>всередину кожної комірки та замість цього укласти. Однак це не повинно впливати на поточні версії будь-яких браузерів (крім IE, який взагалі не підтримує закруглені кути - див. Нижче)

Нарешті, не те, що IE взагалі не підтримує border-radius(IE9 beta підтримує, але більшість користувачів IE буде на IE8 або менше). Якщо ви хочете зламати IE для підтримки border-radius, подивіться на http://css3pie.com/

[РЕДАГУВАТИ]

Гаразд, це мене хвилювало, тому я провів тестування.

Ось приклад JSFiddle, з яким я грав

Здається, критичне, чого вам не вистачало, було border-collapse:separate;на елементі таблиці. Це зупиняє клітини зв’язувати свої межі між собою, що дозволяє їм підібрати радіус межі.

Сподіваюся, що це допомагає.

Обрана відповідь жахлива. Я б реалізував це, націливши комірки таблиці кутів і застосувавши відповідний радіус межі.

Щоб отримати верхні кути, встановіть радіус межі для першого та останнього типу th-х елементів, а потім завершіть, встановивши радіус межі для останнього та першого типу td для останнього типу tr, щоб отримати нижні кути.

th:first-of-type {
  border-top-left-radius: 10px;
}
th:last-of-type {
  border-top-right-radius: 10px;
}
tr:last-of-type td:first-of-type {
  border-bottom-left-radius: 10px;
}
tr:last-of-type td:last-of-type {
  border-bottom-right-radius: 10px;
}

Найкраще рішення, яке я знайшов для закруглених кутів та іншої поведінки CSS3 для IE <9, можна знайти тут: http://css3pie.com/

Завантажте плагін, скопіюйте до каталогу у вашій структурі рішення. Тоді у вашій таблиці стилів переконайтеся, що у вас є тег поведінки, щоб він втягував плагін.

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

.table-canvas 
{
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    overflow:hidden;
    border-radius: 10px;
    -pie-background: linear-gradient(#ece9d8, #E5ECD8);   
    box-shadow: #666 0px 2px 3px;
    behavior: url(Include/PIE.htc);
    overflow: hidden;
}

Не хвилюйтеся, якщо ваш Visual Studio CSS intellisense надає зелене підкреслення для невідомих властивостей, він все одно працює під час його запуску. Деякі елементи не дуже чітко задокументовані, але приклади досить непогані, особливо на першій сторінці.

За особистим досвідом я виявив, що неможливо округлити кути комірки таблиці HTML допомогою чистого CSS. Можливо округлення крайньої межі столу.

Вам доведеться вдатися до використання зображень, як описано в цьому посібнику , або будь-якого подібного :)

Це трохи грубо, але ось те, що я склав, повністю складається з CSS та HTML.

• Зовнішні кути закруглені
• Рядок заголовка
• Кілька рядків даних

Цей приклад також використовує :hoverпсевдо-клас для кожної комірки даних <td>. Елементи можна легко оновити відповідно до ваших потреб, а наведення швидко відключити.

(Однак я ще не отримав :hoverналежної роботи для повних рядків <tr>. Останній наведений рядок не відображається із закругленими кутами внизу. Я впевнений, є щось просте, на що не помічають.)

table.dltrc {
  width: 95%;
  border-collapse: separate;
  border-spacing: 0px;
  border: solid black 2px;
  border-radius: 8px;
}

tr.dlheader {
  text-align: center;
  font-weight: bold;
  border-left: solid black 1px;
  padding: 2px
}

td.dlheader {
  background: #d9d9d9;
  text-align: center;
  font-weight: bold;
  border-left: solid black 1px;
  border-radius: 0px;
  padding: 2px
}

tr.dlinfo,
td.dlinfo {
  text-align: center;
  border-left: solid black 1px;
  border-top: solid black 1px;
  padding: 2px
}

td.dlinfo:first-child,
td.dlheader:first-child {
  border-left: none;
}

td.dlheader:first-child {
  border-radius: 5px 0 0 0;
}

td.dlheader:last-child {
  border-radius: 0 5px 0 0;
}


/*===== hover effects =====*/


/*tr.hover01:hover,
tr.hover02:hover {
  background-color: #dde6ee;
}*/


/* === ROW HOVER === */


/*tr.hover02:hover:last-child {
  background-color: #dde6ee;
  border-radius: 0 0 6px 6px;
  }*/


/* === CELL HOVER === */

td.hover01:hover {
  background-color: #dde6ee;
}

td.hover02:hover {
  background-color: #dde6ee;
}

td.hover02:first-child {
  border-radius: 0 0 0 6px;
}

td.hover02:last-child {
  border-radius: 0 0 6px 0;
}

<body style="background:white">
  <br>
  <center>
    <table class="dltrc" style="background:none">
      <tbody>
        <tr class="dlheader">
          <td class="dlheader">Subject</td>
          <td class="dlheader">Title</td>
          <td class="dlheader">Format</td>
        </tr>
        <tr class="dlinfo hover01">
          <td class="dlinfo hover01">One</td>
          <td class="dlinfo hover01">Two</td>
          <td class="dlinfo hover01">Three</td>
        </tr>
        <tr class="dlinfo hover01">
          <td class="dlinfo hover01">Four</td>
          <td class="dlinfo hover01">Five</td>
          <td class="dlinfo hover01">Six</td>
        </tr>
        <tr class="dlinfo hover01">
          <td class="dlinfo hover01">Seven</td>
          <td class="dlinfo hover01">Eight</td>
          <td class="dlinfo hover01">Nine</td>
        </tr>
        <tr class="dlinfo2 hover02">
          <td class="dlinfo hover02">Ten</td>
          <td class="dlinfo hover01">Eleven</td>
          <td class="dlinfo hover02">Twelve</td>
        </tr>
      </tbody>
    </table>
  </center>
</body>

Додайте <div>обгортку навколо таблиці та застосуйте наступний CSS

border-radius: x px;
overflow: hidden;
display: inline-block;

до цієї обгортки.

Щоб адаптувати блискучу відповідь @luke brawnoy - і якщо ви не використовуєте thу своїй таблиці, ось усі CSS, які вам потрібні, щоб зробити округлу таблицю:

.my_table{
border-collapse: separate;
border-spacing: 0;
border: 1px solid grey;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

.my_table tr:first-of-type {
  border-top-left-radius: 10px;
}

.my_table tr:first-of-type td:last-of-type {
  border-top-right-radius: 10px;
}

.my_table tr:last-of-type td:first-of-type {
  border-bottom-left-radius: 10px;
}

.my_table tr:last-of-type td:last-of-type {
  border-bottom-right-radius: 10px;
}

Для таблиці з обмеженими та прокручуваними таблицями використовуйте це (замініть змінні, $початкові тексти)

Якщо ви використовуєте thead, tfootабо th, просто замініть tr:first-childі tr-last-childта tdз ними.

#table-wrap {
  border: $border solid $color-border;
  border-radius: $border-radius;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
table td { border: $border solid $color-border; }
table td:first-child { border-left: none; }
table td:last-child { border-right: none; }
table tr:first-child td { border-top: none; }
table tr:last-child td { border-bottom: none; }
table tr:first-child td:first-child { border-top-left-radius: $border-radius; }
table tr:first-child td:last-child { border-top-right-radius: $border-radius; }
table tr:last-child td:first-child { border-bottom-left-radius: $border-radius; }
table tr:last-child td:last-child { border-bottom-right-radius: $border-radius; }

HTML:

<div id=table-wrap>
  <table>
    <tr>
       <td>1</td>
       <td>2</td>
    </tr>
    <tr>
       <td>3</td>
       <td>4</td>
    </tr>
  </table>
</div>

Ви можете спробувати це, якщо хочете закруглені кути з кожного боку столу, не торкаючись комірок: http://jsfiddle.net/7veZQ/3983/

<table>
    <tr class="first-line"><td>A</td><td>B</td></tr>
    <tr class="last-line"><td>C</td><td>D</td></tr>
</table>

Зразок HTML

<table class="round-corner" aria-describedby="caption">
    <caption id="caption">Table with rounded corners</caption>
    <thead>
        <tr>
            <th scope="col">Head1</th>
            <th scope="col">Head2</th>
            <th scope="col">Head3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td scope="rowgroup">tbody1 row1</td>
            <td scope="rowgroup">tbody1 row1</td>
            <td scope="rowgroup">tbody1 row1</td>
        </tr>
        <tr>
            <td scope="rowgroup">tbody1 row2</td>
            <td scope="rowgroup">tbody1 row2</td>
            <td scope="rowgroup">tbody1 row2</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td scope="rowgroup">tbody2 row1</td>
            <td scope="rowgroup">tbody2 row1</td>
            <td scope="rowgroup">tbody2 row1</td>
        </tr>
        <tr>
            <td scope="rowgroup">tbody2 row2</td>
            <td scope="rowgroup">tbody2 row2</td>
            <td scope="rowgroup">tbody2 row2</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td scope="rowgroup">tbody3 row1</td>
            <td scope="rowgroup">tbody3 row1</td>
            <td scope="rowgroup">tbody3 row1</td>
        </tr>
        <tr>
            <td scope="rowgroup">tbody3 row2</td>
            <td scope="rowgroup">tbody3 row2</td>
            <td scope="rowgroup">tbody3 row2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td scope="col">Foot</td>
            <td scope="col">Foot</td>
            <td scope="col">Foot</td>
        </tr>
    </tfoot>
</table>

SCSS, який легко перетворити на CSS, використовують sassmeister.com

// General CSS
table,
th,
td {
    border: 1px solid #000;
    padding: 8px 12px;
}

.round-corner {
    border-collapse: collapse;
    border-style: hidden;
    box-shadow: 0 0 0 1px #000; // fake "border"
    border-radius: 4px;

    // Maybe there's no THEAD after the caption?
    caption + tbody {
        tr:first-child {
            td:first-child,
            th:first-child {
                border-top-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-top-right-radius: 4px;
                border-right: none;
            }
        }
    }

    tbody:first-child {
        tr:first-child {
            td:first-child,
            th:first-child {
                border-top-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-top-right-radius: 4px;
                border-right: none;
            }
        }
    }

    tbody:last-child {
        tr:last-child {
            td:first-child,
            th:first-child {
                border-bottom-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-bottom-right-radius: 4px;
                border-right: none;
            }
        }
    }

    thead {
        tr:last-child {
            td:first-child,
            th:first-child {
                border-top-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-top-right-radius: 4px;
                border-right: none;
            }
        }
    }

    tfoot {
        tr:last-child {
            td:first-child,
            th:first-child {
                border-bottom-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-bottom-right-radius: 4px;
                border-right: none;
            }
        }
    }

    // Reset tables inside table
    table tr th,
    table tr td {
        border-radius: 0;
    }
}

http://jsfiddle.net/MuTLY/xqrgo466/

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

#contentblock th:first-child {
    -moz-border-radius: 6px 0 0 0;
    -webkit-border-radius: 6px 0 0 0;
    border-radius: 6px 0 0 0;
    behavior: url(/images/border-radius.htc);
    border-radius: 6px 0 0 0;
}

#contentblock th:last-child {
    -moz-border-radius: 0 6px 0 0;
    -webkit-border-radius: 0 6px 0 0;
    border-radius: 0 6px 0 0;
    behavior: url(/images/border-radius.htc);
    border-radius: 0 6px 0 0;
}
#contentblock tr:last-child td:last-child {
     border-radius: 0 0 6px 0;
    -moz-border-radius: 0 0 6px 0;
    -webkit-border-radius: 0 0 6px 0;
    behavior: url(/images/border-radius.htc);
    border-radius: 0 0 6px 0;
 }

#contentblock tr:last-child td:first-child {
    -moz-border-radius: 0 0 0 6px;
    -webkit-border-radius: 0 0 0 6px;
    border-radius: 0 0 0 6px;
    behavior: url(/images/border-radius.htc);
    border-radius: 0 0 0 6px;
}

Очевидно, що #contentblockчастину можна замінити / відредагувати за потреби, і ви можете знайти border-radius.htcфайл, здійснивши пошук в Google або улюбленому веб-браузері.

Це css3 , що підтримуватиме його лише нещодавній браузер, який не є IE <9

Ознайомтеся тут , він отримує властивість round для всіх доступних браузерів

Додати між <head>тегами:

<style>
  td {background: #ffddaa; width: 20%;}
</style>

і в організмі:

<div style="background: black; border-radius: 12px;">
  <table width="100%" style="cell-spacing: 1px;">
    <tr>
      <td style="border-top-left-radius: 10px;">
        Noordwest
      </td>
      <td>&nbsp;</td>
      <td>Noord</td>
      <td>&nbsp;</td>
      <td style="border-top-right-radius: 10px;">
        Noordoost
      </td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>West</td>
      <td>&nbsp;</td>
      <td>Centrum</td>
      <td>&nbsp;</td>
      <td>Oost</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td style="border-bottom-left-radius: 10px;">
        Zuidwest
      </td>
      <td>&nbsp;</td>
      <td>Zuid</td>
      <td>&nbsp;</td>
      <td style="border-bottom-right-radius: 10px;">
        Zuidoost
      </td>
    </tr>
  </table>
</div>

Колір комірки, вміст і форматування, звичайно, наприклад;
мова йде про інтервал заповнених кольором комірок у div. Роблячи це, межі чорних комірок / межі таблиці насправді є кольором фону div.
Зверніть увагу, що вам потрібно буде встановити div-border-radius приблизно на 2 значення, більші за радіуси межі окремого кута комірки, щоб отримати ефект плавного закругленого кута.

Урок з меж таблиць ...

ПРИМІТКА. Код HTML / CSS нижче слід переглядати лише в IE. Код відображатиметься неправильно в Chrome!

Потрібно пам’ятати, що:

1. Таблиця має межу: її зовнішню межу (яка також може мати радіус межі).

2. Самі клітини ТАКОЖ мають межі (які теж можуть мати радіус межі).

3. Межі таблиці та комірки можуть заважати один одному:

   Кордон комірки може пробиватися через кордон таблиці (тобто: межа таблиці).

   Щоб побачити цей ефект, змініть правила стилю CSS у коді нижче:
   i. таблиця {border-kolaps: окремо;}
   ii. Видаліть правила стилю, які обводять кутові комірки таблиці.
   iii. Потім пограйте з інтервалом між межами, щоб ви могли побачити перешкоди.

4. Однак межу таблиці та межу комірки можна ЗГАТИТИ (використовуючи: border-kolaps: колапс;).

5. Коли вони згорнуті, межі комірок і таблиць втручаються по-різному:

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

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

6. Враховуючи те, що атрибут комірки має перевагу, спосіб округлення чотирьох кутів таблиці тоді:

   i. Згортання меж у таблиці (за допомогою: border-kolaps: згортання;).

   ii. Встановлення бажаної кривизни на кутових клітинках столу.
   iii. Не має значення, якщо кути таблиці закруглені (тобто: радіус її межі може бути нульовим).

			.zui-table-rounded {
				border: 2px solid blue;
				/*border-radius: 20px;*/
				
				border-collapse: collapse;
				border-spacing: 0px;
			}
						
			.zui-table-rounded thead th:first-child {
				border-radius: 30px 0 0 0;
			}
			
			.zui-table-rounded thead th:last-child {
				border-radius: 0 10px 0 0;
			}
			
			.zui-table-rounded tbody tr:last-child td:first-child {
				border-radius: 0 0 0 10px;
			}
			
			.zui-table-rounded tbody tr:last-child td:last-child {
				border-radius: 0 0 10px 0;
			}
			
			
			.zui-table-rounded thead th {
				background-color: #CFAD70;
			}
			
			.zui-table-rounded tbody td {
				border-top: solid 1px #957030;
				background-color: #EED592;
			}

			<table class="zui-table-rounded">
			<thead>
				<tr>
					<th>Name</th>
					<th>Position</th>
					<th>Height</th>
					<th>Born</th>
					<th>Salary</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>DeMarcus Cousins</td>
					<td>C</td>
					<td>6'11"</td>
					<td>08-13-1990</td>
					<td>$4,917,000</td>
				</tr>
				<tr>
					<td>Isaiah Thomas</td>
					<td>PG</td>
					<td>5'9"</td>
					<td>02-07-1989</td>
					<td>$473,604</td>
				</tr>
				<tr>
					<td>Ben McLemore</td>
					<td>SG</td>
					<td>6'5"</td>
					<td>02-11-1993</td>
					<td>$2,895,960</td>
				</tr>
				<tr>
					<td>Marcus Thornton</td>
					<td>SG</td>
					<td>6'4"</td>
					<td>05-05-1987</td>
					<td>$7,000,000</td>
				</tr>
				<tr>
					<td>Jason Thompson</td>
					<td>PF</td>
					<td>6'11"</td>
					<td>06-21-1986</td>
					<td>$3,001,000</td>
				</tr>
			</tbody>
		</table>

CSS:

table {
  border: 1px solid black;
  border-radius: 10px;
  border-collapse: collapse;
  overflow: hidden;
}

td {
  padding: 0.5em 1em;
  border: 1px solid black;
}