셀의 텍스트 양에 관계없이 테이블 열 너비를 일정하게 설정 하시겠습니까?

셀의 텍스트 양에 관계없이 테이블 열 너비를 일정하게 설정 하시겠습니까?

---

내 테이블에서 열의 첫 번째 셀 너비를로 설정했습니다 100px.
그러나이 열에있는 셀 중 하나의 텍스트가 너무 길면 열 너비가보다 큽니다 100px. 이 확장을 어떻게 비활성화 할 수 있습니까?

---

나는 그것을 알아내는 데 어려움이 있었기 때문에 조금 가지고 놀았습니다.

셀 너비를 설정 th하거나 ( td둘 다 설정 했거나 둘 다 설정) 및을 설정해야 table-layout합니다 fixed. 어떤 이유로 든 셀 너비는 테이블 너비가 설정된 경우에만 고정 된 것처럼 보입니다 (어리석은하지만 whatev라고 생각합니다).

또한 추가 텍스트가 테이블에서 나오지 않도록 overflow속성 을 설정하는 것이 hidden좋습니다.

CSS의 테두리와 크기를 모두 남겨 두어야합니다.

좋아, 여기 내가 가진 것입니다 :

table {
  border: 1px solid black;
  table-layout: fixed;
  width: 200px;
}

th,
td {
  border: 1px solid black;
  width: 100px;
  overflow: hidden;
}

<table>
  <tr>
    <th>header 1</th>
    <th>header 234567895678657</th>
  </tr>
  <tr>
    <td>data asdfasdfasdfasdfasdf</td>
    <td>data 2</td>
  </tr>
</table>

여기 JSFiddle에 있습니다.

이 사람은 비슷한 문제가있었습니다 : 테이블 셀 너비-고정 너비, 줄 바꿈 / 잘라 내기

---

참조 : http://www.html5-tutorials.org/tables/changing-column-width/

테이블 태그 다음에 col 요소를 사용하십시오. 닫기 태그가 필요하지 않습니다.

예를 들어 열이 세 개인 경우 :

<table>
  <colgroup>
    <col style="width:40%">
    <col style="width:30%">
    <col style="width:30%">
  </colgroup>  
  <tbody>
    ...
  </tbody>
</table>

---

<div>내부 에 태그를 추가 <td>하거나 <th>내부에 너비를 정의하십시오 <div>. 도움이 될 것입니다. 다른 것은 작동하지 않습니다.

예.

<td><div style="width: 50px" >...............</div></td>

---

다른 열 크기를 조정해야하는 동안 하나 이상의 고정 폭 열 광석이 필요한 경우, 모두 설정 시도 min-width와 max-width같은 값으로 설정합니다.

---

해당 CSS 안에 이것을 작성해야합니다.

table-layout:fixed;

---

내가하는 일은 :

1. td 너비를 설정하십시오.

   <td width="200" height="50"><!--blaBlaBla Contents here--></td>
   

2. CSS로 td 너비를 설정하십시오.

   <td style="width:200px; height:50px;">
   

3. CSS를 사용하여 너비를 최대 및 최소로 다시 설정하십시오.

   <td style="max-width:200px; min-width:200px; max-height:50px; min-height:50px; width:200px; height:50px;">
   

조금 반복적으로 들리지만 원하는 결과를 얻습니다. 이를 쉽게 달성하려면 스타일 시트의 클래스에 CSS 값을 넣어야합니다.

.td_size {    
  width:200px; 
  height:50px;
  max-width:200px;
  min-width:200px; 
  max-height:50px; 
  min-height:50px;
  **overflow:hidden;** /*(Optional)This might be useful for some overflow contents*/   
}

그때:

<td class="td_size">

class 속성을 <td>원하는 곳에 배치하십시오.

---

나는 이것을 사용했다

.app_downloads_table tr td:first-child {
    width: 75%;
}

.app_downloads_table tr td:last-child {
    text-align: center;
}

---

또한 width : auto 와 함께 마지막 "충전 셀"에 넣는 것도 도움이됩니다 . 이것은 남은 공간을 차지하며 지정된대로 다른 모든 치수를 남깁니다.

---

고정 레이아웃을 원하지 않으면 열의 크기를 적절하게 지정하십시오.

CSS :

.special_column { width: 120px; }

HTML :

<td class="special_column">...</td>

---

KAsun은 올바른 아이디어를 가지고 있습니다. 올바른 코드는 다음과 같습니다.

<style type="text/css">
  th.first-col > div, 
  td.first-col > div {
    overflow:hidden;
    white-space:nowrap;
    width:100px
  }
</style>

<table>
  <thead><tr><th class="first-col"><div>really long header</div></th></tr></thead>
  <tbody><tr><td class="first-col"><div>really long text</div></td></tr></tbody>
</table>

---

고정 너비보다 작을 때 작은 화면에 대해 허용 된 응답에 응답하십시오.

HTML :

<table>
  <tr>
    <th>header 1</th>
    <th>header 234567895678657</th>
  </tr>
  <tr>
    <td>data asdfasdfasdfasdfasdf</td>
    <td>data 2</td>
  </tr>
</table>

CSS

table{
    border: 1px solid black;
    table-layout: fixed;
    max-width: 600px;
    width: 100%;
}

th, td {
    border: 1px solid black;
    overflow: hidden;
    max-width: 300px;
    width: 100%;
}

JS 피들

https://jsfiddle.net/w9s3ebzt/

---

내 대답에 따라 여기에 , 사용하는 것도 가능하다 테이블에 머리를 (비어있을 수 있음) 및 각 테이블 헤드 셀에 대한 상대 폭을 적용합니다. 테이블 본체의 모든 셀 너비는 열 머리 너비와 일치합니다. 예:

HTML

<table>
  <thead>
    <tr>
      <th width="5%"></th>
      <th width="70%"></th>
      <th width="15%"></th>
      <th width="10%"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Some text...</td>
      <td>May 2018</td>
      <td>Edit</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Another text...</td>
      <td>April 2018</td>
      <td>Edit</td>
    </tr>
  </tbody>
</table>

CSS

table {
  width: 600px;
  border-collapse: collapse;
}

td {
  border: 1px solid #999999;
}

결과보기

또는 colgroupHyathin의 답변에서 제안한대로 사용하십시오 .

---

이것을 설정 :

style="min-width:100px;" 

나를 위해 일했다.

---

KAsun의 대답 은 px 대신 vw 를 사용하여 더 잘 작동한다는 것을 알았습니다 .

<td><div style="width: 10vw" >...............</div></td>

열 너비를 조정하는 데 필요한 유일한 스타일이었습니다.

---

열 너비가 설정되었으므로 "fixed"설정 하지 않아도됩니다 overflow:hidden.

참고 URL : https://stackoverflow.com/questions/4457506/set-the-table-column-width-constant-regardless-of-the-amount-of-text-in-its-cell