td 너비, 작동하지 않습니까?

그래서 여기에이 코드가 있습니다.

<table>
    <tr>
        <td width="200px" valign="top">
            <div class="left_menu">
                <div class="menu_item">
                    <a href="#">Home</a>
                </div>
            </div>
        </td>
        <td width="1000px" valign="top">Content</td>
    </tr>
</table>

CSS로

.left_menu {
    background: none repeat scroll 0 0 #333333;
    border-radius: 5px 5px 5px 5px;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    font-weight: bold;
    padding: 5px;
}

.menu_item {
    background: none repeat scroll 0 0 #CCCCCC;
    border-bottom: 1px solid #999999;
    border-radius: 5px 5px 5px 5px;
    border-top: 1px solid #FFFFCC;
    cursor: pointer;
    padding: 5px;
}

그것은 내 브라우저에서 잘 작동하고 나는 모든 브라우저 Mac과 PC에서 그것을 테스트했지만, 누군가가 불평한다 td과 width(200)의 폭을 변경 유지합니다. 그가 무슨 말을하는지 모르겠습니다. 누구든지 그 또는 그녀가 너비가 변경되는 이유를 알고 td있습니까?

그것은해야한다:

<td width="200">

또는

<td style="width: 200px">

셀에 200px에 맞지 않는 콘텐츠 (예 :) somelongwordwithoutanyspaces가 포함되어있는 경우에도 CSS table-layout: fixed에 표에 대한 내용이 포함되어 있지 않으면 셀이 늘어납니다 .

편집하다

kristina childs가 그녀의 답변에 언급했듯이 width속성과 인라인 CSS ( style속성 포함)를 사용 하지 않아야합니다 . 가능한 한 스타일과 구조를 분리하는 것이 좋습니다.

테이블의 너비 및 / 또는 높이는 더 이상 표준이 아닙니다. Ianzz가 말했듯이 그들은 더 이상 사용되지 않습니다. 대신이 작업을 수행하는 가장 좋은 방법은 원하는 크기로 열린 셀을 유지하는 테이블 셀 내부에 블록 요소를 두는 것입니다.

<table>
    <tr>
        <td valign="top">
            <div class="left_menu">
                <div class="menu_item">
                    <a href="#">Home</a>
                </div>
            </div>
        </td>
        <td valign="top" class="content">Content</td>
    </tr>
</table>

CSS

.content {
    width: 1000px;
}

.left_menu {
    background: none repeat scroll 0 0 #333333;
    border-radius: 5px 5px 5px 5px;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    font-weight: bold;
    padding: 5px;
    width: 200px;
}

.menu_item {
    background: none repeat scroll 0 0 #CCCCCC;
    border-bottom: 1px solid #999999;
    border-radius: 5px 5px 5px 5px;
    border-top: 1px solid #FFFFCC;
    cursor: pointer;
    padding: 5px;
}

 <table style="table-layout:fixed;">

이렇게하면 스타일이 지정된 너비가 적용 <td>됩니다. 텍스트가 너무 많이 채워지면 다른 <td>텍스트와 겹칩니다 . 따라서 미디어 쿼리를 사용해보십시오.

테이블의 width/ height속성에 단위를 지정할 수 없습니다 . 항상 픽셀 단위이지만 더 이상 사용되지 않으므로 전혀 사용해서는 안됩니다.

"table-layout : fixed;"를 시도 할 수 있습니다. 당신의 테이블에

table-layout: fixed;
width: 150px;

150px 또는 원하는 너비.

참조 : https://css-tricks.com/fixing-tables-long-strings/

<td>태그 css 내에서 사용할 수 있습니다 .display:inline-block

처럼: <td style="display:inline-block">

사용하려고

word-wrap: break-word;

이 도움을 바랍니다

이 시도:

word-break: break-all;

나는 사용한다

<td nowrap="nowrap">

포장 방지 참조 : https://www.w3schools.com/tags/att_td_nowrap.asp

thead에서 열의 너비를 조정하면 전체 테이블에 영향을 미칩니다.

<table>
    <thead>
        <tr width="25">
            <th>Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tr>
        <td>Joe</td>
        <td>joe@email.com</td>
    </tr>
</table>

제 경우에는 thead> tr의 너비가 table> tr> td의 너비를 직접 재정의했습니다.

사용하다

<table style="table-layout:fixed;">

테이블의 너비를 100 %로 설정 한 다음이 코드를 사용합니다.

$('#dataTable').dataTable( {
        bAutoWidth: false, 
        aoColumns : [
          { sWidth: '45%' },
          { sWidth: '45%' },
          { sWidth: '10%' },
              ]
      });

(테이블 ID는 dataTable이고 3 개의 열이 있음) 각 셀의 길이를 지정합니다.

나는 많은 솔루션을 시도했지만 그것은 나를 위해 작동하지 않았기 때문에 테이블로 플렉스를 시도했고 border-collapse와 같은 모든 테이블 기능으로 잘 작동했으며 변경 사항 만 표시 속성입니다.

이것은 내 HTML 요구 사항이었습니다.

<table>
  <thead>
    <tr>
      <th>1</th>
      <th colspan="3">2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td colspan="3">2</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td colspan="2">3</td>
    </tr>
  </tbody>
</table>

내 CSS

table{
    display: flex;
  flex-direction: column;
}
table tr{
    display: flex;
  width: 100%;
}
table > thead > tr > th:first-child{
    width: 20%;
}
table > thead > tr > th:last-child{
    width: 80%;
}
table > tbody tr > td:first-child{
    width: 10%;
}
table > tbody tr > td{
    width: 30%;
}
table > tbody tr > td[colspan="2"]{
    width: 60%;
}
table > tbody tr > td[colspan="3"]{
    width: 90%;
}
/*This is to remove border making 1px space on right*/
table > tbody tr > td:last-child{
    border-right: 0;
}

이 문제는 아주 쉽게 사용하여 해결 min-width하고 max-widthCSS 규칙 내에서.

HTML

<table>
  <tr>
    <td class="name">Peter</td>
    <td class="hobby">Photography</td>
    <td class="comment">A long comment about something...</td>
  </td>
</table>

CSS

.name {
  max-width: 80px;
  min-width: 80px;
}

이렇게하면 첫 번째 열의 너비가 80px가됩니다. 일반적으로 나는 대부분이 비어있는 매우 넓은 열이있는 테이블을 만들 때 매우 가끔 너무 긴 텍스트를 지배하기 위해 min-width없이 max-width 만 사용합니다. OP의 질문은 고정 너비로 ​​설정하는 것에 관한 것이기 때문에 두 규칙을 함께 사용합니다. 많은 브라우저에서width:80px;CSS의 에서 테이블 열에 대해 무시됩니다. HTML 내에서 너비를 설정하는 것은 작동하지만 작업을 수행하는 방식은 아닙니다.

최소 및 최대 너비 규칙을 사용하고 동일하게 설정하지 않고 범위를 설정하는 것이 좋습니다. 이런 식으로 테이블은 일을 할 수 있지만 지나치게 긴 콘텐츠로 무엇을해야하는지에 대한 힌트를 줄 수 있습니다.

텍스트를 줄 바꿈하고 행 높이를 늘리지 않고 사용자가 전체 텍스트를 볼 수 있도록 white-space: nowrap;하려면 기본 규칙에서 사용한 다음 너비 및 Nowrap 규칙을 제거하는 호버 규칙을 적용합니다. 사용자가 마우스를 위에 올려 놓으면 전체 콘텐츠를 볼 수 있습니다. 이 같은:

CSS

.name {
  max-width: 80px;
  white-space: nowrap;
  overflow: hidden;
}
.name:hover {
  max-width: none;
  white-space: normal;
  overflow:auto;
}

달성하려는 목표에 따라 다릅니다. 누군가에게 도움이되기를 바랍니다. 추신 옆으로 iOS의 경우 호버가 작동하지 않는 문제가 수정되었습니다 . iOS Safari 및 Chrome에서 CSS 호버가 작동하지 않음을 참조하십시오.