HTML 테이블의 최소 너비 설정

HTML 테이블의 최소 너비 설정

---

내 테이블에는 여러 열이 있습니다.

각 열에는 브라우저 창 크기에 따라 달라지는 동적 너비가 있어야합니다. 반면에 각 열은 너무 작아서는 안됩니다. 그래서 나는 min-width그 열에 대해 설정하려고했지만 유효한 속성이 아닙니다. 시도 min-width에 대해 <td>너무 잘못된 속성입니다 잘하지만있다.

min-widthHTML 테이블에서 col / td 를 설정하는 방법이 있습니까?

---

이걸로 해봐:

<table style="border:1px solid">
    <tr>
        <td style="min-width:50px">one</td>
        <td style="min-width:100px">two</td>
    </tr>
</table>

---

min-width및 max-width속성이 표 셀에 대해 예상 한 방식으로 작동하지 않습니다. 에서 사양 :

CSS 2.1에서는 테이블, 인라인 테이블, 테이블 셀, 테이블 열 및 열 그룹에 대한 '최소 너비'및 '최대 너비'의 효과가 정의되지 않았습니다.

이것은 CSS3에서 변경되지 않았습니다.

---

보이지 않는 요소 (또는 유사 요소)를 사용하여 테이블 셀을 강제로 확장 해보십시오.

td:before {
  content: '';
  display: block; 
  width: 5em;
}

JSFiddle : https://jsfiddle.net/cibulka/gf45uxr6/1/

---

한 가지 방법은 <div style="min-width:XXXpx">td 내에 a를 추가 하고<td style="width:100%">

---

<table style="min-width:50px; max-width:150px;">
    <tr>
        <td style="min-width:50px">one</td>
        <td style="min-width:100px">two</td>
    </tr>
</table>

이것은 이메일 스크립트를 사용하여 저에게 효과적입니다.

---

고정 레이아웃 테이블, 즉 데이터 테이블을 사용하는 경우

<td style="display:inline-block; min-width: 「…」px;">Foo</td>

OR

<td style="display:inline-block; min-width: max-content;">Bar</td>

---

<table style="border:2px solid #ddedde">
    <tr>
        <td style="border:2px solid #ddedde;width:50%">a</td>
        <td style="border:2px solid #ddedde;width:20%">b</td>
        <td style="border:2px solid #ddedde;width:30%">c</td>
    </tr>
    <tr>
        <td style="border:2px solid #ddedde;width:50%">a</td>
        <td style="border:2px solid #ddedde;width:20%">b</td>
        <td style="border:2px solid #ddedde;width:30%">c</td>
    </tr>
</table>

참조 URL : https://stackoverflow.com/questions/18503849/set-min-width-in-html-tables-td