CSS 표시 : 너비가 100 %로 설정된 경우 테이블 행이 확장되지 않습니다.
약간의 문제가 있습니다. FireFox 3.6을 사용하고 있으며 다음과 같은 DOM 구조가 있습니다.
<div class="view-row">
<div class="view-type">Type</div>
<div class="view-name">Name</div>
</div>
그리고 다음 CSS :
.view-row {
width:100%;
display:table-row;
}
.view-name {
display: table-cell;
float:right;
}
.view-type {
display: table-cell;
}
이륙하면 100 % 너비로 display:table-row올바르게 표시됩니다 view-row. 다시 넣으면 축소됩니다. 나는 이것을 JS Bin에 올렸다.
무슨 일이야?
display:table-row등을 사용 하는 경우 포함 테이블을 포함하는 적절한 마크 업이 필요합니다. 그것이 없으면 원래 질문은 기본적으로 다음과 같은 잘못된 마크 업을 제공합니다.
<tr style="width:100%">
<td>Type</td>
<td style="float:right">Name</td>
</tr>
위의 테이블은 어디에 있습니까? 당신은 단지 난데없이 행을 가질 수 없습니다 (TR이 중 하나에 포함되어야합니다 table, thead, tbody, 등)
대신으로 외부 요소를 추가 display:table하고 포함하는 요소에 100 % 너비를 둡니다. 두 개의 내부 셀이 자동으로 50/50으로 이동하고 텍스트를 두 번째 셀에 바로 정렬합니다. floats테이블 요소는 잊으십시오 . 너무 많은 두통을 유발할 것입니다.
마크 업 :
<div class="view-table">
<div class="view-row">
<div class="view-type">Type</div>
<div class="view-name">Name</div>
</div>
</div>
CSS :
.view-table
{
display:table;
width:100%;
}
.view-row,
{
display:table-row;
}
.view-row > div
{
display: table-cell;
}
.view-name
{
text-align:right;
}
테스트 된 답변 :
.view-row css에서 다음을 변경하십시오.
display:table-row;
에:
display:table
그리고 "float"를 제거하십시오 . 모든 것이 예상대로 작동합니다.
As it has been suggested in the comments, there is no need for a wrapping table. CSS allows for omitting levels of the tree structure (in this case rows) that are implicit. The reason your code doesn't work is that "width" can only be interpreted at the table level, not at the table-row level. When you have a "table" and then "table-cell"s directly underneath, they're implicitly interpreted as sitting in a row.
Working example:
<div class="view">
<div>Type</div>
<div>Name</div>
</div>
with css:
.view {
width:100%;
display:table;
}
.view > div {
width:50%;
display: table-cell;
}
Note that according to the CSS3 spec, you do NOT have to wrap your layout in a table-style element. The browser will infer the existence of containing elements if they do not exist.
give on .view-type class float:left; or delete the float:right; of .view-name
edit: Wrap your div <div class="view-row"> with another div for example <div class="table">
and set the following css :
.table {
display:table;
width:100%;}
You have to use the table structure for correct results.
You can nest table-cell directly within table. You muslt have a table. Starting eith table-row does not work. Try it with this HTML:
<html>
<head>
<style type="text/css">
.table {
display: table;
width: 100%;
}
.tr {
display: table-row;
width: 100%;
}
.td {
display: table-cell;
}
</style>
</head>
<body>
<div class="table">
<div class="tr">
<div class="td">
X
</div>
<div class="td">
X
</div>
<div class="td">
X
</div>
</div>
</div>
<div class="tr">
<div class="td">
X
</div>
<div class="td">
X
</div>
<div class="td">
X
</div>
</div>
<div class="table">
<div class="td">
X
</div>
<div class="td">
X
</div>
<div class="td">
X
</div>
</div>
</body>
</html>
'development' 카테고리의 다른 글
| 정규식 \ p {L} 및 \ p {N} (0) | 2020.09.03 |
|---|---|
| SVN (Subversion) 문제 "파일이 추가 될 예정이지만 누락 됨"-버전 사용 (0) | 2020.09.03 |
| Python의 파일 / 스트림에서 여러 JSON 값을 느리게 읽을 수있는 방법은 무엇입니까? (0) | 2020.09.03 |
| Docker, 읽기 전용으로 볼륨 마운트 (0) | 2020.09.03 |
| dplyr은 여러 열 또는 복합 키에서 조인 할 수 있습니까? (0) | 2020.09.03 |