CSS td 너비 절대, 위치 사용

이 JSFIDDLE을 참조하십시오

td.rhead { width: 300px; }

CSS 너비가 작동하지 않는 이유는 무엇입니까?

<table>
<thead>
<tr>
<td class="rhead">need 300px</td>
<td colspan="7">Week #0</td>
<td colspan="7">Week #1</td>
<!-- etc..-->
</tr>
<tr>
<td class="rhead"></td>
<td>S</td><td>M</td><td>T</td><td>W</td><td>T</td><td>F</td><td>S</td>
<td>S</td><td>M</td><td>T</td><td>W</td><td>T</td><td>F</td><td>S</td>
<!-- etc... -->
</tr>
<thead>
</table>

또한 위치 : 고정, 절대 등이 td 너비에 미치는 영향은 무엇입니까? 나는 수정 이상의 이유를 찾고 있습니다. 어떻게 작동하는지 이해하고 싶습니다.

이것은 당신이 듣고 싶은 것이 아닐 수도 있지만 display: table-cell너비를 존중하지 않으며 전체 테이블의 너비에 따라 축소됩니다. display: block예를 들어 너비를 지정하는 테이블 셀 자체 내부에 요소가 있으면 쉽게 해결할 수 있습니다.

<td><div style="width: 300px;">wide</div></td>

셀의 위치가 테이블에 대해 모두 정적이기 때문에 <table>그 자체가 position: fixed절대적이거나 절대적인 경우에는 큰 차이가 없어야 합니다.

http://jsfiddle.net/ExplosionPIlls/Mkq8L/4/

편집 : 나는 크레딧을받을 수 없지만 주석에서 min-width대신 width테이블 셀 대신 사용할 수 있다고 말합니다 .

사용하는 것이 좋습니다 table-layout: fixed

Auto 는 기본값이며 테이블이 크면 브라우저가 모든 크기가 맞는지 확인하기 위해 반복 할 때 약간의 클라이언트 측 지연이 발생할 수 있습니다.

고정 이 훨씬 더 좋고 페이지에 더 빨리 렌더링됩니다. 테이블의 구조는 테이블 전체 너비와 각 열의 너비에 따라 달라집니다.

여기에서는 원래 예제 인 JSFIDDLE에 적용됩니다. 나머지 열이 뭉개지고 내용이 겹치는 것을 알 수 있습니다. 더 많은 CSS를 사용하여 문제를 해결할 수 있습니다 (제가해야 할 일은 첫 번째 TR에 클래스를 추가하는 것뿐입니다) :

    table {
        width: 100%;
        table-layout: fixed;
    }

    .header-row > td {
        width: 100px;
    }

    td.rhead {
        width: 300px
    }

여기에서 실제로 본 : JSFIDDLE

제공된 링크에서 작동하지 않는 이유는 300px 열과 52 열을 각각 7 열에 걸쳐 표시하려고하기 때문입니다. 열 수를 줄이면 작동합니다. 화면에 그다지 많지 않습니다.

열을 강제로 맞추려면 설정을 시도하십시오.

body {min-width:4150px;}

내 jsfiddle 참조 : http://jsfiddle.net/Mkq8L/6/ @mike 아직 댓글을 달 수 없습니다.

그 이유는 테이블의 너비를 지정하지 않았고 전체 td가 넘쳐나 기 때문입니다.

예를 들어 , 나는 당신의 요구 사항에 맞을 것이라고 생각한 5000px의 너비를 테이블에 제공했습니다.

table{
    width:5000px;
}

당신이 제공 한 것과 똑같은 코드이며, 단지 테이블 너비에 추가했습니다.

당신의 TD가 기본 테이블 너비를 훨씬 넘었 기 때문입니다. 보시다시피 각 tr에서 약 45 개의 td를 꺼내면 (즉 jsfiddle이 아닌 귀하의 질문에 제공 한 코드) 정확히 작동합니다.

이것을 시도하십시오.

<table>
<thead>
<tr>
<td width="300">need 300px</td>

사용해보십시오

table {
  table-layout: auto;
}

Bootstrap을 사용하는 경우 클래스 table에는 table-layout: fixed;기본적으로 있습니다.

테이블 레이아웃 속성과 "고정"값을 테이블에 사용하십시오.

table {
   table-layout: fixed;
   width: 300px; /* your desired width */
}

테이블의 전체 너비를 설정 한 후 이제 td의 %로 너비를 설정할 수 있습니다.

td:nth-child(1), td:nth-child(2) {
   width: 15%;  
}

http://www.w3schools.com/cssref/pr_tab_table-layout.asp 링크에서에 대해 자세히 알아볼 수 있습니다 .

내 미친 해결책.)

$(document).ready(function() {
    $("td").each(function(index) { 
    var htmlText = "<div style='width:300px;'>" + $(this).text() +"</div>";
    $(this).html(htmlText);
  });
});

예를 들어 테이블 너비가 100 % 인 경우 td에 대한 백분율 너비 (예 : 20 %)를 사용해보십시오.

예를 들어 다음과 같이 div의 첫 번째 셀에서 내용을 래핑합니다.

HTML :

<td><div class="rhead">a little space</div></td>

CSS :

.rhead {
  width: 300px;
}

다음은 jsfiddle 입니다.

다음을 사용할 수도 있습니다.

.rhead {
    width:300px;
}

그러나 이것은 내가 올바르게 기억한다면 일부 브라우저에서만 가능합니다 .IE8은 이것을 허용하지 않습니다. 무엇보다도 width=""속성을 그 <td>자체 에 두는 것이 더 안전 합니다.