빈 셀의 테두리를 표시하는 CSS?
셀이 비어 있어도 셀 테두리를 표시하려면 어떤 CSS를 사용해야합니까?
특히 IE 7.
내가 기억한다면, 셀은 무언가로 채워지지 않는 한 일부 IE에는 존재하지 않습니다 ...
공백을 채우기 위해 (분할되지 않는 공백)을 넣을 수 있다면 일반적으로 작동합니다. 아니면 순수한 CSS 솔루션이 필요합니까?
분명히 IE8은 기본적으로 셀을 표시하므로이를 숨겨야 empty-cells:hide하지만 IE7에서는 전혀 작동하지 않습니다 (기본적으로 숨겨 짐).
모든 셀에 데이터가 있는지 확인하는 또 다른 방법 :
$(document).ready(function() {
$("td:empty").html(" ");
});
border-collapse속성을로 설정하면 collapseIE7은 빈 셀을 표시합니다. 그것은 또한 경계를 무너 뜨립니다. 그래서 이것은 당신이 원하는 100 %가 아닐 수도 있습니다.
td {
border: 1px solid red;
}
table {
border-collapse: collapse;
}
<html> <head> <title>Border-collapse Test</title> <style type="text/css"> td {
border: 1px solid red;
}
table {
border-collapse: collapse;
}<table>
<tr>
<td></td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td></td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td></td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td></td>
<td />
</tr>
</table>CSS 솔루션에 대한 질문이 있지만 HTML 솔루션이 할 수있는 기회가 없으면 다음과 같습니다.
다음 두 속성을 테이블 요소에 추가해보십시오. frame = "box"rules = "all" 은 다음과 같습니다.
<table border="1" cellspacing="0" frame="box" rules="all">
방금 다음을 찾았습니다. 표준을 준수하지만 IE에서는 작동하지 않습니다. 한숨.
empty-cells: show
나는이 질문을 우연히 만났지만 실제로 문제를 해결 한 답변을 보지 못했습니다.
IE7이 셀에 대한 내부 내용을 보지 못하기 때문에 문제가 발생합니다. 프로그래밍 측면에서 셀은 결과로 생성되며 null대부분의 경우 와 마찬가지로 a 경계를 지정 null하거나 작업을 수행 할 수 없습니다 . 브라우저는 테두리 / 레이아웃을 적용하기 위해 레이아웃이있는 요소 / 개체가 필요합니다.
비어 <div></div>있거나 <span></span>내용을 포함하지 않는 경우에도 렌더링 할 항목이 없으므로이 null경우 다시 발생합니다.
그러나 빈 div/span레이아웃 속성 을 제공하여 브라우저가 셀에 내용이 있다고 생각하도록 속일 수 있습니다. 가장 쉬운 방법은 CSS 스타일을 적용하는 것입니다 zoom:1.
<table>
<tr><td>Foo</td>
<td><span style="zoom:1;"></span></td></tr>
</table>
이 해결 방법은 화면 판독기를 불필요하게 엉망으로 만들지 않고 셀 값을 잘못 나타내지 않기 때문에를 사용하는 것보다 낫 습니다. 최신 브라우저에서는 empty-cell:<show|hide>대안을 사용할 수 있습니다 .
Note: in lieu of Tomalak's comment, it should be understood that hasLayout has nothing to do with null, it was merely a comparison of how the browser interacts and renders hasLayout similarly to how a database or programming language interacts with nulls. It is a strech, but I thought it might be easier to understand for those programmers turned web designers.
Ideally, you shouldn't have any empty cells in a table. Either you have a table of data, and there's no data in that specific cell (which you should indicate with "-", or "n/a/", or something equally appropriate, or - if you must - , as suggested), or you have a cell that needs to span a column or row, or you're trying to achieve some layout with a table that you should be using CSS for.
Can we have a bit more detail?
This question's old, but still a top result in Google, so I'll add what I've found:
Simply adding border-collapse: collapse to the table style fixed this problem for me in IE7 (and didn't affect the way they're displayed in FF, Chrome, etc).
Best to avoid the extraneous code of adding an or other spacing element when you can fix with CSS.
I guess this can't be done with CSS; You need to put a in every empty cell for the border to show in IE...
empty-cell only fixed Firefox (YES I really did have this issue in Firefox) IE 7 & 8 were still problematic..
This worked for me in both Firefox 3.6.x, IE 7 & 8, Chrome, and Safari:
==============================
table {
*border-collapse: collapse;}
.sampleTD {
empty-cells: show;}
==============================
Had to use the * to make sure the table style was only applied to the IE browser.
Try this if you can't use non-breakable space:
var tn = document.createTextNode('\ ');
yourContainer.appendChild(ta);
I create a div style that has the same font color as the background of your cell and write anything (usually a "-" "n/a" or "empty") to give the cell content. It shows up if you highlight the page, but when viewed normally looks how you want.
I use a mix of html and css to create cross browser table grids:
html
<table cellspacing="1" style="background-color:#000;" border="0">
css
td{background-color:#fff;}
I haven't seen any issues with any browsers so far.
"IE" isn't a useful term in this context anymore now that IE8 is out.
IE7 always does "empty-cells:show" (or so I'm told ... Vista). IE8 in any of its "Quirks" or "IE7 Standards" modes always does "empty-cells:hide". IE8 in "Standards" mode defaults to "empty-cells:show" and supports the attribute via CSS.
As far as I know, every other browser has correctly supported this for several years (I know it was added in Firefox 2).
I'm taking this from another website but:
.sampletable {
border-collapse: collapse;}
.sampleTD {
empty-cells: show;}
Use for the CSS for the table and TD element respectively.
참고URL : https://stackoverflow.com/questions/57002/css-to-make-an-empty-cells-border-appear
'Development Tip' 카테고리의 다른 글
| NSString의 일부를 굵게 표시하는 방법은 무엇입니까? (0) | 2020.10.25 |
|---|---|
| DataGridView CheckBox 이벤트 변경을 감지하는 방법은 무엇입니까? (0) | 2020.10.25 |
| iPhone에서 쓰기 가능한 경로를 얻으려면 어떻게해야합니까? (0) | 2020.10.25 |
| 트위터 부트 스트랩에서 행 줄 제거 (0) | 2020.10.25 |
| Javascript에서 HTML5 필수 속성을 설정하는 방법은 무엇입니까? (0) | 2020.10.25 |