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

내 테이블에서 열의 첫 번째 셀 너비를로 설정했습니다 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;
}

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

CSS :

.special_column { width: 120px; }

HTML :

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

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

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

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/

이것을 설정 :

style="min-width:100px;" 

나를 위해 일했다.

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>
  <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의 답변에서 제안한대로 사용하십시오 .

다음과 같이 텍스트에 관계없이 최소 너비를 설정하려는 셀에서 :: after 요소를 사용합니다.

.cell::after {
    content: "";
    width: 20px;
    display: block;
}

테이블 부모에 너비를 설정하거나 테이블 레이아웃을 사용할 필요가 없습니다.

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

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

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

당신은 설정할 필요가 없습니다 "fixed"- 당신이 필요로하는 모든 설정되는 overflow:hidden집합입니다 폭 열 때문이다.