source

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

nicesource 2023. 4. 24. 23:29
반응형

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

에서는 첫 를 '열'로했습니다.100px.
이 한 너비가 더 .100px이 확장을 비활성화하려면 어떻게 해야 합니까?

잘 몰라서 잠시 가지고 놀았어요.

너비 중 하나)를 설정해야 합니다.th ★★★★★★★★★★★★★★★★★」td동작했습니다.둘 다 설정했습니다).또,fixed어떤 이유에서인지 셀 폭도 테이블 폭만 정해져 있는 것 같습니다(그건 말도 안 된다고 생각합니다만).

,, 를, 를, 를, 를, 를, 리를 설정하는 것도 도움이 됩니다.overflow을 property property로 설정합니다.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를 사용하여 폭을 다시 max 및 min으로 설정합니다.

    <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">

의 "Atribute"에 배치합니다.<td>는는원원원원원

설정:

style="min-width:100px;"

나한테는 통했어

이 답변에 따르면 테이블 헤드(공백일 수 있음)를 사용하여 각 테이블 헤드 셀에 상대적인 폭을 적용할 수도 있습니다.테이블 본체에 있는 모든 셀의 폭은 칼럼 헤드의 폭과 일치합니다.예:

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;
}

결과 표시

또는를를를 altern altern altern altern는 altern altern altern altern 。colgroup★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

이거 썼어

.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/

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>

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

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

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

테이블에 대한 접근이 제한적인 경우 클래스 또는 인라인 스타일을 사용하는 것이 복잡할 수 있습니다.

또는 각 행의 첫 번째 td 및 두 번째 아이(일명 첫 번째 열)를 대상으로 할 수 있습니다.

이 규칙은 내가 테스트했을 때 나에게 효과가 있었다.width와는 동작하지 않았습니다.max-width어떤 이유로든:

thead, tbody tr {
            
    display:table;
    width:100%;
    table-layout:fixed;
}

tr th:first-child, tr td:first-child {
                
    width:100px;
}

테이블에서 적절한 사이징을 하는 것은 어렵다.나에게 정말 효과가 있었던 유일한 접근법은table-layout: fixed;각각에 지정된 폭과 조합하여th그리고...width: auto;한 기둥만 더 키워도 상관없습니다.

클래스리스 테이블을 사용한 예를 다음에 나타냅니다.동적 열을 수행할 경우 클래스 버전이 필요합니다.

table {
  table-layout: fixed;
}

th,td {
  text-align: left;
  vertical-align: top;
  /* use this in the columns where you're not concerned with new lines */
  word-break: break-word;
}

th:first-child, th:last-child {
  width: 5ch;
  text-align: center;
}

th:nth-child(n + 2):nth-child(-n + 3) {
  background: red;
  width: 25%;
}

th:nt-child(4) {
  background: blue;
  width: auto;
}
<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Description</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <th>John</th>
      <th>Smith</th>
      <th>Vivamus fermentum elit purus, eget egestas nunc convallis ac. Vestibulum faucibus dolor nunc, vitae rutrum mauris porta at. Ut id ante quis lectus consectetur interdum vel in leo. Ut ut convallis ipsum, quis aliquet erat. Maecenas ipsum dolor, rhoncus et ultrices a</th>
      <th>30</th>
    </tr>
    <tr>
      <th>2</th>
      <th>John</th>
      <th>Smith</th>
      <th>Vivamus fermentum elit purus, eget egestas nunc convallis ac. Vestibulum faucibus dolor nunc, vitae rutrum mauris porta at. Ut id ante quis lectus consectetur interdum vel in leo. Ut ut convallis ipsum, quis aliquet erat. Maecenas ipsum dolor, rhoncus et ultrices a</th>
      <th>30</th>
    </tr>
    <tr>
      <th>3</th>
      <th>John</th>
      <th>Smith</th>
      <th>Vivamus fermentum elit purus, eget egestas nunc convallis ac. Vestibulum faucibus dolor nunc, vitae rutrum mauris porta at. Ut id ante quis lectus consectetur interdum vel in leo. Ut ut convallis ipsum, quis aliquet erat. Maecenas ipsum dolor, rhoncus et ultrices a</th>
      <th>30</th>
    </tr>
    <tr>
      <th>4</th>
      <th>John</th>
      <th>Smith</th>
      <th>Vivamus fermentum elit purus, eget egestas nunc convallis ac. Vestibulum faucibus dolor nunc, vitae rutrum mauris porta at. Ut id ante quis lectus consectetur interdum vel in leo. Ut ut convallis ipsum, quis aliquet erat. Maecenas ipsum dolor, rhoncus et ultrices a</th>
      <th>30</th>
    </tr>
  </tbody>
</table>

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

반응형

'source' 카테고리의 다른 글

스타일과 ControlTemplate의 차이점  (0) 2023.04.24
서브타원 svn: 무시  (0) 2023.04.24
오브젝트 유형에 따른 WPF 트리거  (0) 2023.04.24
함수를 호출하는 Excel 셀  (0) 2023.04.24
vba에서 VLOOKUP 함수 쓰기  (0) 2023.04.24

'source'의 다른글

  • 현재글셀의 텍스트 양에 관계없이 표 열 너비를 일정하게 설정하시겠습니까?

관련글

댓글

티스토리툴바