it-swarm.com.ru

Скругленные углы стола только 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
}

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

Какие-либо решения?

67
Vishal Shah

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

66
RoToRa

Во-первых, вам нужно больше, чем просто -moz-border-radius, если вы хотите поддерживать все браузеры. Вы должны указать все варианты, включая простой 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 поддерживает, но большинство пользователей IE будут использовать IE8 или менее). Если вы хотите взломать IE для поддержки border-radius, посмотрите на http://css3pie.com/

[Правка]

Ладно, это меня беспокоило, так что я провел некоторое тестирование.

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

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

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

17
Spudley

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

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)

15
Lars Schinkel

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

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

6
Kyle

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

5
Patrick Rodriguez

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

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

Это немного грубо, но вот кое-что, что я собрал, которое полностью состоит из 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>

1
K. Parker

Образец 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/

0
Leandro Barbosa

Урок в таблице границ ...

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

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

  1. Таблица имеет границу: ее внешнюю границу (которая также может иметь границу-радиус).

  2. Сами ячейки ТАКЖЕ имеют границы (которые тоже могут иметь радиус границы).

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

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

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

  4. Тем не менее, граница таблицы и границы ячейки могут быть COLLAPSED (используя: border-collapse: collapse;).

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

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

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

  6. Принимая во внимание, что атрибут ячейки имеет приоритет, способ округлить четыре угла таблицы следующим образом: 

    я. Свертывание границ на столе (используя: 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>

0
IqbalHamid

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

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

0
Ansipants

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

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

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

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

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

0
BiAiB

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

0
Paul Schuddebeurs