CSS로 테두리 너비를 어떻게 설정합니까?

CSS로 테두리 너비를 어떻게 설정합니까?

---

왜 이것이 작동합니까?

<table border=1>

그리고 그렇지 않습니까?

<table style="border-width:1px;border-color:black">

Chrome과 IE9에서 동일한 결과를 얻습니다.

---

css를 사용하여 테이블에서 테두리를 수행하는 것은 조금 더 복잡합니다 (하지만 많이는 아니지만 이 jsfiddle을 예제로 참조하십시오 ).

table {
  border-collapse: collapse;
  border: 1px solid black;
}

table td {
  border: 1px solid black;
}

<table>
  <tr>
    <td>test</td>
    <td>test</td>
  </tr>
</table>

---

기본값 border-style은 none이므로 너비와 색상뿐만 아니라이를 지정해야합니다.

border속기 속성을 사용하여 한 번에 세 값을 모두 설정할 수 있습니다 .

또한 border 속성은 테이블 과 셀 의 테두리를 설명합니다 . CSS는 훨씬 더 유연하여 선택한 요소의 테두리 만 설명합니다. 동일한 효과를 얻으려면 셀도 선택해야합니다.

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

CSS의 테두리 속성 및 표를 참조하십시오 .

---

작동하지 않는 이유는를 설정 했음에도 불구 border-width하고 다음 border-color을 지정하지 않았기 때문입니다 border-style.

<table style="border-width:1px;border-color:black;border-style:solid;">

JS Fiddle 데모 .

일반적으로 스타일 시트에서 스타일을 정의하는 것이 더 좋습니다 (모든 요소의 style속성 을 찾아서 변경할 필요없이 모든 요소의 스타일이 지정되도록 ).

table {
    border-color: #000;
    border-width: 1px;
    border-style: solid;
    /* or, of course,
    border: 1px solid #000;
    */
}

JS Fiddle 데모 ( 또는 속기 border표기법 사용 ).

---

<table style='border:1px solid black'>
    <tr>
        <td>Derp</td>
    </tr>
</table>

작동합니다. 테두리에는 속기 구문을 사용합니다.

---

다음과 같이 테두리 스타일을 추가해야합니다.

<table style="border:1px solid black">

또는 다음과 같이 :

<table style="border-width:1px;border-color:black;border-style:solid;">

---

이렇게 :

border: 1px solid black;

왜 작동하지 않습니까? 때문에:

항상 border-width 속성 앞에 border-style (내 예제에서는 단색) 속성을 선언하십시오. 색상을 변경하려면 요소에 테두리가 있어야합니다.

---

<table style="border: 5px solid black">

이것은 테이블 주위에 테두리를 추가합니다.

If you want same border through CSS then add this rule:

table tr td { border: 5px solid black; }

and one thing for HTML table to avoid spaces

<table cellspacing="0" cellpadding="0">

참고URL : https://stackoverflow.com/questions/7764553/how-do-i-set-table-border-width-with-css