CSS에서 셀패딩과 셀스페이스를 설정하시겠습니까?
테이블에서 " " " " "cellpadding ★★★★★★★★★★★★★★★★★」cellspacing할 수 .
<table cellspacing="1" cellpadding="1">
CSS를 사용하여 동일한 작업을 수행할 수 있는 방법은 무엇입니까?
기본
패딩을 제어하려면 CSS '셀 패딩'을 사용하면 .padding 10px의 셀패딩: 10px의 : 10px의 "셀패딩":
td {
padding: 10px;
}
는 '셀스페이스'를 .border-spacing를 들어 "cellspacing의 경우: 10px의 "cellspacing":
table {
border-spacing: 10px;
border-collapse: separate;
}
이 특성으로 인해 종래의 "셀스페이스"에서는 할 수 없었던 수평과 수직의 간격을 분리할 수 있습니다.
IE의 문제 © 7
Internet Explorer 7 internet explorer Internet Explorer 。'말하는 는 이 브라우저들이 '거의'를 계속 입니다.border-collapse속성: 인접한 테이블 셀의 경계를 병합합니다. 셀스페이스)를 하는 ,cellspacing="0"） 그 、 。border-collapse:collapse테이블 셀 사이에 공백이 없어야 합니다. 이 는, 하는 것은 때문에,.cellspacingHTML 입니다.
브라우저의 경우 Internet Explorer 5-7의 경우,border-spacingInternet 의 아직 않은 ) Internet Explorer를 사용할 수 있습니다(Internet Explorer 0개).border-collapse:collapse.
table {
border-spacing: 0;
border-collapse: collapse;
}
주의: 테이블에 적용할 수 있는 CSS 속성과 브라우저에 대한 자세한 내용은 이 환상적인 Quirksmode 페이지를 참조하십시오.
체납
브라우저의 기본 동작은 다음과 같습니다.
table {border-collapse: collapse;}
td {padding: 0px;}
셀패드
셀의 내용과 셀 벽 사이의 공간을 설정합니다.
table {border-collapse: collapse;}
td {padding: 6px;}
셀스페이스
테이블 셀 사이의 공간을 제어합니다.
table {border-spacing: 2px;}
td {padding: 0px;}
둘다요.
table {border-spacing: 2px;}
td {padding: 6px;}
둘 다(특수)
table {border-spacing: 8px 2px;}
td {padding: 6px;}
주의: 있는 경우
border-spacing세트', '', '세트'를 .border-collapse은 ""입니다.separate.
여기에서는, 이것을 실현하기 위한 낡은 HTML 방법을 찾을 수 있습니다.
table
{
border-collapse: collapse; /* 'cellspacing' equivalent */
}
table td, table th
{
padding: 0; /* 'cellpadding' equivalent */
}
테이블 셀에 마진을 설정하는 것은 제가 알기로는 효과가 없습니다.에 대응하는 한 CSScellspacingborder-spacing인터넷 익스플로러
하시면 됩니다.border-collapse: collapse그 '0'을 합니다.cellspacing여하하다
이 해킹은 Internet Explorer 6 이상, Google Chrome, Firefox 및 Opera에서 작동합니다.
table {
border-collapse: separate;
border-spacing: 10px; /* cellspacing */
*border-collapse: expression('separate', cellSpacing = '10px');
}
table td, table th {
padding: 10px; /* cellpadding */
}
*인터넷 익스플로러 6 77 및7 른른른 른른른 른른 른른 른른 。
expression('separate', cellSpacing = '10px')'separate'그러나 JavaScript에서는 예상보다 많은 인수를 전달할 수 있으므로 두 문 모두 실행됩니다.
0이 아닌 셀스페이스 값을 원하는 사용자에게는 다음과 같은 CSS가 작동했지만 Firefox에서만 테스트할 수 있습니다.
호환성에 대한 자세한 내용은 다른 곳에 게시된 Quirksmode 링크를 참조하십시오.이전 버전의 Internet Explorer에서는 작동하지 않을 수 있습니다.
table {
border-collapse: separate;
border-spacing: 2px;
}
이 문제에 대한 간단한 해결책은 다음과 같습니다.
table
{
border: 1px solid #000000;
border-collapse: collapse;
border-spacing: 0px;
}
table td
{
padding: 8px 8px;
}
, 만약 cellspacing="0" , , , , , , , 을 마세요.border-collapse: collapse 안에서table의 스타일시트
셀의 내용을 div로 감싸면 원하는 모든 것을 할 수 있지만, 균일한 효과를 얻으려면 모든 셀을 한 줄로 감싸야 합니다.예를 들어 왼쪽과 오른쪽 여백을 넓히려면 다음 절차를 따릅니다.
그래서 CSS는
div.cellwidener {
margin: 0px 15px 0px 15px;
}
td.tight {
padding: 0px;
}<table border="0">
<tr>
<td class="tight">
<div class="cellwidener">My content</div>
</td>
</tr>
</table>네, 번거롭습니다.네, Internet Explorer에서 동작합니다.사실 이 테스트는 Internet Explorer에서만 수행했습니다.직장에서는 이 기능만 사용할 수 있기 때문입니다.
이 스타일은 테이블(셀패딩, 셀스페이스 및 테두리)을 완전히 재설정하기 위한 것입니다.
reset.css 파일에는 다음과 같은 스타일이 있습니다.
table{
border:0; /* Replace border */
border-spacing: 0px; /* Replace cellspacing */
border-collapse: collapse; /* Patch for Internet Explorer 6 and Internet Explorer 7 */
}
table td{
padding: 0px; /* Replace cellpadding */
}
놀 는 TBH를 하는 것이 . CSS의 경우cellpadding="0" cellspacing="0"...
을 하고 있는 사람<td>님은 분명히 이것을 시도하지 않았습니다.
테이블 데이터와 함께 CSS 패딩 규칙을 사용합니다.
td {
padding: 20px;
}
테두리 간격의 경우:
table {
border-spacing: 1px;
border-collapse: collapse;
}
그러나 Internet Explorer와 같은 이전 버전의 브라우저에서는 박스 모델의 구현이 다르기 때문에 문제가 발생할 수 있습니다.
에서 알 수 W3C의 분류에서는 W3C의 분류는 W3C의 분류에 의한 입니다.<table>'오직'하다.
에, 「베트라운」을 .<div> 그 가 떠 있는 요.position: absolute; ★★★★★★★★★★★★★★★★★」background: transparent;
Chrome, Internet Explorer(6 이상) 및 Mozilla Firefox(2 이상)에서 작동합니다.
은 용기하기 위해 를 들어, 여백은 용기 요소 사이에 스페이서를 작성하기 사용됩니다.<table>,<div> ★★★★★★★★★★★★★★★★★」<form> 아니라, 이에요.<tr>,<td>,<span> ★★★★★★★★★★★★★★★★★」<input>컨테이너 요소 이외의 용도로 사용하면 향후 브라우저 업데이트를 위해 웹 사이트를 조정하느라 바쁠 것입니다.
CSS:
selector{
padding:0 0 10px 0; // Top left bottom right
}
CSS 패딩 속성을 사용하면 테이블셀 내에서 패딩을 쉽게 설정할 수 있습니다.표의 셀패딩 속성과 동일한 효과를 낼 수 있는 유효한 방법입니다.
table,
th,
td {
border: 1px solid #666;
}
table th,
table td {
padding: 10px;
/* Apply cell padding */
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Set Cellpadding in CSS</title>
</head>
<body>
<table>
<thead>
<tr>
<th>Row</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Clark</td>
<td>Kent</td>
<td>clarkkent@mail.com</td>
</tr>
<tr>
<td>2</td>
<td>Peter</td>
<td>Parker</td>
<td>peterparker@mail.com</td>
</tr>
<tr>
<td>3</td>
<td>John</td>
<td>Rambo</td>
<td>johnrambo@mail.com</td>
</tr>
</tbody>
</table>
</body>
</html>마찬가지로 CSS 보더 스페이싱 속성을 사용하여 셀 스페이싱 속성처럼 인접 테이블셀 보더 간의 간격을 적용할 수 있습니다.단, 경계 간격을 두고 동작하려면 경계 축소 속성 뮤즈가 별도로 존재해야 합니다(기본값).
table {
border-collapse: separate;
border-spacing: 10px;
/* Apply cell spacing */
}
table,
th,
td {
border: 1px solid #666;
}
table th,
table td {
padding: 5px;
/* Apply cell padding */
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Set Cellspacing in CSS</title>
</head>
<body>
<table>
<thead>
<tr>
<th>Row</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Clark</td>
<td>Kent</td>
<td>clarkkent@mail.com</td>
</tr>
<tr>
<td>2</td>
<td>Peter</td>
<td>Parker</td>
<td>peterparker@mail.com</td>
</tr>
<tr>
<td>3</td>
<td>John</td>
<td>Rambo</td>
<td>johnrambo@mail.com</td>
</tr>
</tbody>
</table>
</body>
</html>이것을 시험해 보세요.
table {
border-collapse: separate;
border-spacing: 10px;
}
table td, table th {
padding: 10px;
}
또는 다음을 시도해 보십시오.
table {
border-collapse: collapse;
}
table td, table th {
padding: 10px;
}
하였습니다.!important 뒤에
border-collapse: collapse !important;
IE7에서 사용할 수 있습니다.셀스페이스 애트리뷰트를 덮어쓰는 것 같습니다.
예를 들어 HTML5에 준거한 방법으로 테이블에 10px의 "셀패딩"과 15px의 "셀스페이싱"을 할당한다고 합시다.여기에서는 매우 유사한 출력을 제공하는 두 가지 방법을 보여 줍니다.
테이블의 동일한 HTML 마크업에는 2개의 다른 CSS 속성 세트가 적용되지만 반대 개념입니다.
합니다.
border-collapse)separate및 " " " " 를 사용합니다.border-spacingborder-collapse로로 합니다.collapse이렇게 '어울리다'를 합니다.border이치노
두 경우 모두 셀패딩은 다음을 지정함으로써 달성됩니다.padding:10pxtd두 " " " 입니다.background-color더 명확한 데모를 위해서만 할당됩니다.
첫 번째 방법:
table{border-spacing:15px}
td{background-color:#00eb55;padding:10px;border:0}<table>
<tr>
<td>Header 1</td><td>Header 2</td>
</tr>
<tr>
<td>1</td><td>2</td>
</tr>
<tr>
<td>3</td><td>4</td>
</tr>
</table>두 번째 방법:
table{border-collapse:collapse}
td{background-color:#00eb55;padding:10px;border:15px solid #fff}<table>
<tr>
<td>Header 1</td><td>Header 2</td>
</tr>
<tr>
<td>1</td><td>2</td>
</tr>
<tr>
<td>3</td><td>4</td>
</tr>
</table>td {
padding: npx; /* For cellpadding */
margin: npx; /* For cellspacing */
border-collapse: collapse; /* For showing borders in a better shape. */
}
ifmargin안 됐으니까 해 보세요.설정해 보겠습니다.displaytr로로 합니다.block그러면 마진이 작용합니다.
언급URL : https://stackoverflow.com/questions/339923/set-cellpadding-and-cellspacing-in-css
'programing' 카테고리의 다른 글
| (회피하지 않는) 자기 닫기 태그는 HTML5에서 유효합니까? (0) | 2023.04.08 |
|---|---|
| PowerShell의 기본 디렉토리를 설정하려면 어떻게 해야 합니까? (0) | 2023.04.08 |
| HTML5에 플로트 입력 타입이 있나요? (0) | 2023.04.08 |
| PowerShell 및 -contains 연산자 (0) | 2023.04.08 |
| 데이터 손실 없이 SQL Server 데이터베이스의 열 데이터 유형을 변경하는 방법 (0) | 2023.04.08 |