Подтвердить что ты не робот

Закругленные углы таблицы Только CSS

Я искал и искал, но не смог найти решение для моего требования.

У меня есть простая HTML-таблица. Я хочу использовать для этого круглые углы без, используя изображения или JS, т.е. Только CSS > . Вот так:

Table layout sketch

Закругленные углы для угловых ячеек и 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
}

Но это оставляет меня без границ для ячеек. Если я добавлю границы, они не округлены!

Любые решения?

4b9b3361

ОТВЕТЫ

Ответ 1

Кажется, что он отлично работает в 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>

Ответ 2

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

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

Во-вторых, для прямого ответа на ваш вопрос border-radius на самом деле не отображается граница; он просто устанавливает, как углы выглядят границы, если есть.

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

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

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

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

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

[EDIT]

Хорошо, это прослушивало меня, поэтому я провел некоторое тестирование.

Вот пример JSFiddle, с которым я играл

Кажется, что критическая вещь, которую вы отсутствовали, была border-collapse:separate; в элементе таблицы. Это мешает клеткам соединять их границы вместе, что позволяет им получить радиус границы.

Надеюсь, что это поможет.

Ответ 3

Для меня Twitter Bootstrap Solution выглядит неплохо. Это исключает IE < 9 (без круглых углов в IE 8 и ниже), но это O.K. Я думаю, если вы разработаете перспективные Web-приложения.

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>

Ответ 4

Посредством личного опыта я обнаружил, что невозможно округлить углы таблицы HTML cell с помощью чистого CSS. Округление внешней границы стола возможно.

Вам придётся прибегнуть к использованию изображений, как описано в этот учебник или любой другой:)

Ответ 5

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

Ответ 6

Это css3, поддерживающий его будет поддерживать только последний браузер, не поддерживающий IE < 9.

Посмотрите здесь, он получает свойство round для всех доступных браузеров

Ответ 7

Следующее - это то, что я использовал, которое работало для меня в разных браузерах, поэтому я надеюсь, что это поможет кому-то в будущем:

#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 или в вашем любимом веб-браузере.

Ответ 8

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

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

Ответ 9

CSS

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

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

Ответ 10

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

Ответ 11

Пример 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 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/

Ответ 12

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

Ответ 13

Выбранный ответ ужасен. Я бы выполнил это путем таргетинга на ячейки угловой таблицы и применения соответствующего радиуса границы.

Чтобы получить верхние углы, установите радиус границы для первого и последнего типа элементов 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;
}

Ответ 14

Урок в табличных границах...

ПРИМЕЧАНИЕ. Код HTML/CSS ниже следует просматривать только в IE. Код не будет отображаться правильно в Chrome!

Нам нужно помнить, что:

  • В таблице есть граница: ее внешняя граница (которая также может иметь радиус границы).

  • У самих ячеек также есть границы (которые тоже могут иметь радиус границы).

  • Границы таблицы и ячейки могут мешать друг другу:

    Граница ячейки может пробиваться через границу таблицы (то есть: граница таблицы).

    Чтобы увидеть этот эффект, измените правила стиля CSS в приведенном ниже коде следующим образом:
      я. таблица {border-collapse: separate;}
      II. Удалите правила стиля, которые расположены вокруг угловых ячеек таблицы.
      III. Затем играйте с интервалом между границами, чтобы вы могли видеть помехи.

  • Однако границы таблицы и границы ячеек могут быть COLLAPSED (с использованием: border-collapse: collapse;).

  • Когда они свертываются, границы ячейки и таблицы мешают по-другому:

    я. Если граница стола округлена, но границы ячеек остаются квадратными, форма ячейки имеет приоритет, и таблица теряет изогнутые углы.

    II. И наоборот, если угловая ячейка изогнута, но граница таблицы квадратная, тогда вы увидите уродливый квадратный угол, граничащий с кривизной угловых ячеек.

  • Учитывая, что атрибут ячейки имеет приоритет, способ округления таблицы по четырем углам:

    я. Свертывание границ на столе (с использованием: border-collapse: collapse;).

    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>

Ответ 15

Добавьте обертку <div> вокруг таблицы и примените следующий CSS

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

к этой оболочке.