다음과 같은 DOM 구조가 있습니다.
<table class="tbl">
<tr>
<th>
<td>
<div>
<span>
A lot of text in hereeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
</span>
</div>
</td>
<td>
<div>
<span>
A lot of text in hereeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
</span>
</div>
</td>
</th>
</tr>
</table>
table.tbl{
background-color: #FFF;
border: 1px solid #000;
border-collapse: separate;
border-radius: 5px;
float: left;
margin: 10px 0;
width: 100%;
}
table.tbl tr {
font-weight: 400;
text-align: left;
}
table.tbl th {
color: #FFF;
font-weight: 400;
padding: 6px;
text-align: left;
}
table.tbl td {
padding: 10px 8px;
}
table.tbl div {
max-width: 100%;
display: inline-flex;
}
table.tbl span {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
이 테이블은 내 페이지의 오른쪽에 있지만 하나 또는 두 개의 span 태그에 많은 양의 텍스트가 있으면 테이블이 내 페이지에서 확장됩니다.
width: 100%내 페이지 오른쪽에있는 사용 가능한 모든 공간을 채워야하므로 테이블을 유지 해야합니다.
span 태그에 CSS 줄임표를 추가하지만 테이블의 전체 너비를 그대로 유지할 수 width: 100%있습니까?
현재로서는 저에게 효과가없는 것 같습니다. 어떤 제안이나 조언이라도 대단히 감사하겠습니다.
그의 것을 시도해 볼 수 있습니다.
table.tbl{
background-color: #FFF;
border: 1px solid #000;
border-collapse: separate;
border-radius: 5px;
float: left;
margin: 10px 0;
width: 100%;
table-layout: fixed;
}
table.tbl tr {
font-weight: 400;
text-align: left;
}
table.tbl th {
color: #FFF;
font-weight: 400;
padding: 6px;
text-align: left;
}
table.tbl td {
padding: 10px 8px;
}
table.tbl div {
max-width: 100%;
display: inline-flex;
}
table.tbl span {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다