모든 <td>의 너비가 <td> 대신 가장 똑같은 내용으로 만들어야합니다.

Question

각 행에는 하나의 셀만있는 테이블이 있습니다. 각 셀에 추가되는 단어는 다양합니다. 일부는 길지만 일부는 길지만 모든 셀의 너비는 가장 긴 내용이있는 셀의 너비와 같습니다.

CSS/HTML에서 각 셀 너비를 가장 긴 내용이있는 셀 대신 자체 내용에 맞출 수 있습니까?

$("#chatdisplay").append("<tr bgcolor='#ccffcc'><td><b>" + arr[i].date_time_sent + "</b><br/>" + arr[i].sender + ":" + "<br>" + arr[i].message + "<br></td></tr>"); 

$("#chatdisplay").append("&nbsp;"); 

CSS

table,th,td,tr { 
    padding: 20px; 
    border-radius: 20px; 
    padding-top: 8px; 
    padding-bottom: 8px; 
} 
table { 
    overflow-y: scroll; 
    height: 400px; 
    width: 100%; 
    display: block; 
    background-color: #ffffff; 
} 

Answer 1

당신이 정말하고 싶은 경우 - 당신은 그러나이 정말 이을하지 않는 것이 좋습니다의 td 요소에 display: inline-block를 사용하여, 수 및 이것을하는 방법이 아닙니다.

구조체에 테이블을 사용할 수 있으며 (실제로는 필요하지 않지만) div 블록을 사용할 수 있습니다. 여기

는 3 옵션에 대한 예입니다

이

table,th,td,tr { 
 
    padding: 20px; 
 
    padding-top: 8px; 
 
    padding-bottom: 8px; 
 
} 
 
table { 
 
    overflow-y: scroll; 
 
    width: 100%; 
 
    display: block; 
 
    background-color: #ffffff; 
 
} 
 
#tbl1 td { 
 
    border-radius: 20px; 
 
    background: #ccffcc; 
 
    display: inline-block; 
 
} 
 
#tbl2 div.container { 
 
    border-radius: 20px; 
 
    background: #ccffcc; 
 
    display: inline-block; 
 
    padding: 8px 20px; 
 
} 
 
#tbl2 tr, #tbl2 td { 
 
    padding: 0; 
 
} 
 
div.blocks div.container { 
 
    padding: 4px 20px; 
 
} 
 
div.blocks div.container div.content { 
 
    border-radius: 20px; 
 
    background: #ccffcc; 
 
    display: inline-block; 
 
    padding: 8px 20px; 
 
}

td with display: inline-block:<br /> 
 
<table id="tbl1"> 
 
    <tr> 
 
    <td>This is some content</td> 
 
    </tr><tr> 
 
    <td>text</td> 
 
    </tr><tr> 
 
    <td>This is a cell with much more content</td> 
 
    </tr> 
 
</table> 
 
<br /> 
 
div's insinde td<br /> 
 
<table id="tbl2"> 
 
    <tr> 
 
    <td> 
 
     <div class="container">This is some content</div> 
 
    </td> 
 
    </tr><tr> 
 
    <td> 
 
     <div class="container">text</div> 
 
    </td> 
 
    </tr><tr> 
 
    <td> 
 
     <div class="container">This is a cell with much more content</div> 
 
    </td> 
 
    </tr> 
 
</table> 
 

 
<br /> 
 
Div's only:<br /> 
 
<div class="blocks"> 
 
    <div class="container"> 
 
    <div class="content">This is some content</div> 
 
    </div> 
 
    <div class="container"> 
 
    <div class="content">text</div> 
 
    </div> 
 
    <div class="container"> 
 
    <div class="content">This is a cell with much more contentThis is a cell with much more contentThis is a cell with much more contentThis is a cell with much more contentThis is a cell with much more contentThis is a cell with much more contentThis is a cell with much more contentThis is a cell with much more contentThis is a cell with much more content</div> 
 
    </div> 
 
</div>