CSS td 너비 절대, 위치 사용

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/

EDIT: I can't take credit, but as the comments say you can just use min-width instead of width on the table cell instead.

---

You're better off using table-layout: fixed

Auto is the default value and with large tables can cause a bit of client side lag as the browser iterates through it to check all the sizes fit.

Fixed is far better and renders quicker to the page. The structure of the table is dependent on the tables overall width and the width of each of the columns.

Here it is applied to the original example: JSFIDDLE, You'll note that the remaining columns are crushed and overlapping their content. We can fix that with some more CSS (all I've had to do is add a class to the first TR):

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

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

    td.rhead {
        width: 300px
    }

Seen in action here: JSFIDDLE

---

The reason it doesn't work in the link your provided is because you are trying to display a 300px column PLUS 52 columns the span 7 columns each. Shrink the number of columns and it works. You can't fit that many on the screen.

If you want to force the columns to fit try setting:

body {min-width:4150px;}

see my jsfiddle: http://jsfiddle.net/Mkq8L/6/ @mike I can't comment yet.

---

The reason, is, because you did not specify the width of the table, and your whole bunch of td's are overflowing.

This for example, i've given the table a width of 5000px, which I thought would fit your requirements.

table{
    width:5000px;
}

It is the exact same code you provided, which I merely added in the table width.

I believe what is happening, is because your TD's are way past the default table width. Which you could see, if you pull out about 45 of your td's in each tr, (i.e. the code you provided in your question, not jsfiddle) it works exactly fine

---

Try this it work.

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

---

Try to use

table {
  table-layout: auto;
}

If you use Bootstrap, class table has table-layout: fixed; by default.

---

Use table-layout property and the "fixed" value on your table.

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

After setting up the entire width of the table, you can now setup the width in % of the td's.

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

You can learn more about in on this link: http://www.w3schools.com/cssref/pr_tab_table-layout.asp

---

My crazy solution.)

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

---

If table width is for example 100%, try using a percentage width on td such as 20%.

---

Wrap content from first cell in div e.g. like that:

HTML:

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

CSS:

.rhead {
  width: 300px;
}

Here is a jsfiddle.

---

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

.rhead {
    width:300px;
}

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

참고 URL : https://stackoverflow.com/questions/14765817/using-css-td-width-absolute-position