css 표시 : 테두리가 표시되지 않는 테이블
<html>
<style type="text/css">
.table { display: table;}
.tablerow { display: table-row; border:1px solid black;}
.tablecell { display: table-cell; }
</style>
<div class="table">
<div class="tablerow">
<div class="tablecell">Hello</div>
<div class="tablecell">world</div>
</div>
<div class="tablerow">
<div class="tablecell">foo</div>
<div class="tablecell">bar</div>
</div>
</div>
</html>
내 이해에 따르면 tablerow 클래스를 통해 지정한 각 행에 검은 색 테두리를 그려야하지만 테두리가 나타나지 않습니다.
그리고 행의 높이를 변경하고 싶었습니다 .'px '로 지정하면 작동하지만 %로 지정하면 작동하지 않습니다.
.tablerow {
display: table-row;
border:1px solid black;
position: relative; //not affecting anything and the border disappears!!
//position: absolute; // if this is set,the rows overlaps and the border works
height: 40%; // works only if specified in px and not in %
}
어딘가에서 뭔가 잘못되고 있지만 어디인지 이해할 수 없습니다. 도와주세요!
다음 과 같이 작동 border-collapse: collapse;하려면 .table클래스에 추가해야합니다 .
<html>
<style type="text/css">
.table { display: table; border-collapse: collapse;}
.tablerow { display: table-row; border: 1px solid #000;}
.tablecell { display: table-cell; }
</style>
<div class="table">
<div class="tablerow">
<div class="tablecell">Hello</div>
<div class="tablecell">world</div>
</div>
<div class="tablerow">
<div class="tablecell">foo</div>
<div class="tablecell">bar</div>
</div>
</div>
</html>
당신은 추가 할 필요 border받는 tablecell클래스입니다.
또한 멋지게 보이게 border-collapse:collapse;하려면 테이블 클래스 에 추가 해야합니다.
예 : http://jsfiddle.net/jasongennaro/4bvc2/
편집하다
댓글에 따라
div에 테두리를 적용하고 있는데 제대로 표시되어야합니까?
Yes, but once you set it to display as a table that is how it will act... as a table, so you will then need to follow the css rules for displaying tables.
If you need to set the border only on the rows, use border-top and border-bottom and then set specific classes for the leftmost and rightmost cells.
Table rows can't have a border attribute. You can get a border around each row by giving all cells a top and bottom border, and adding a class for the left-most and right-most cells with a left and right border respectively.
edit: I forgot about border-collapse:collapse. That will work too.
참고URL : https://stackoverflow.com/questions/7175049/css-displaytable-not-displaying-the-border
'Nice programing' 카테고리의 다른 글
| Xcode에서 빌드 시간을 줄이고 컴파일 시간을 단축하는 방법은 무엇입니까? (0) | 2020.11.07 |
|---|---|
| 플로팅을 위해 numpy를 사용하여 csv를 2D 행렬에로드 (0) | 2020.11.07 |
| OpenSSL : Experian URL의 첫 번째 인증서를 확인할 수 없습니다. (0) | 2020.11.07 |
| iOS 앱 (iPhone 및 iPad)에서 수동 언어 선택 (0) | 2020.11.07 |
| FIFO 기반 대기열 구현? (0) | 2020.11.07 |