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

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



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

}


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



какие решения?

955   15  

15 ответов:

Кажется, отлично работает в FF и Chrome (не тестировал другие) с отдельными границами:http://jsfiddle.net/7veZQ/3/

Edit: вот относительно чистая реализация вашего эскиза:

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/

63  
2016-12-07 22:25:37

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

[EDIT]

ладно, это меня достало, так что я сделал некоторые тесты.

вот пример JSFiddle я был игра с

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

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

17  
2011-02-09 12:06:26

для меня Twitter Bootstrap Solution выглядит хорошо. Он исключает IE

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)

14  
2016-12-07 22:14:13

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

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

6  
2011-02-08 13:18:52

лучшее решение, которое я нашел для скругленных углов и другого поведения CSS3 для IEhttp://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;
}

Не волнуйтесь, если ваш Визуальная студия для CSS технология IntelliSense дает вам зеленый подчеркивание неизвестных свойств, он по-прежнему работает, когда вы запустите его. Некоторые элементы не очень четко документированы, но примеры очень хороши, особенно на первой странице.

5  
2016-12-07 22:34:06

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

чтобы получить верхние углы, установите радиус границы на первом и последнем типе е элементы, а затем закончить, установив радиус границы на последнем и первом из 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  
2017-11-16 00:28:34

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

если вы используете 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  
2013-06-08 18:30:17

CSS:

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

td {
  padding: 0.5em 1em;
  border: 1px solid black;
}
0  
2014-04-16 23:07:51

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

пример 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  
2015-12-24 05:24:52

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

#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  
2016-12-07 22:32:35

Это css3, только последние non-IE

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

0  
2016-12-08 02:54:19

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

0  
2017-02-13 02:26:45

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

Примечание: код HTML / CSS ниже следует рассматривать только в IE. Код не будет отображаться правильно в Chrome!

мы должны помнить, что:

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

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

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

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

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

  4. таблица границы границ и ячеек могут быть свернуты (с помощью: border-collapse: collapse;).

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

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

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

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

    i. сворачивание границ на столе (с помощью: border-collapse: collapse;).

    второй. Установка желаемой кривизны по углу ячейки таблицы.
    раздел 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>,917,000</td>
				</tr>
				<tr>
					<td>Isaiah Thomas</td>
					<td>PG</td>
					<td>5'9"</td>
					<td>02-07-1989</td>
					<td>3,604</td>
				</tr>
				<tr>
					<td>Ben McLemore</td>
					<td>SG</td>
					<td>6'5"</td>
					<td>02-11-1993</td>
					<td>,895,960</td>
				</tr>
				<tr>
					<td>Marcus Thornton</td>
					<td>SG</td>
					<td>6'4"</td>
					<td>05-05-1987</td>
					<td>,000,000</td>
				</tr>
				<tr>
					<td>Jason Thompson</td>
					<td>PF</td>
					<td>6'11"</td>
					<td>06-21-1986</td>
					<td>,001,000</td>
				</tr>
			</tbody>
		</table>
0  
2017-11-28 20:35:28

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

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

в этот фантик.

-1  
2016-07-08 21:51:51

Comments

    Ничего не найдено.
Click here to cancel reply.