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

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;

---

Note that adjusting the width of a column in the thead will affect the whole table

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

In my case, the width on the thead > tr was overriding the width on table > tr > td directly.

---

I use

<td nowrap="nowrap">

to prevent wrap Reference: https://www.w3schools.com/tags/att_td_nowrap.asp

참고URL : https://stackoverflow.com/questions/11090544/td-widths-not-working