| |
|
|
| | Цитата – «атрибут border может быть применен к любым объектам».
Файл
<htnl>
<head>
<style>
table { border:3px solid red; }
tr { border:3px solid green; }
td { border:3px solid blue; }
</style>
</head>
<body>
<table id="tb">
<tr><td>11</td><td>12</td></tr>
<tr><td>21</td><td>22</td></tr>
</table>
</body>
</htnl>
В IE7, FireFox, Chrome видны бордюры только TABLE и TD (красного и синего цвета), бордюр TR (зеленого цвета) не отрисовывается. Что делаю не так? | |
| |
|
|
| |
|
|
| |
для: K
(30.10.2008 в 12:57)
| | | Цитата – «атрибут border может быть применен к любым объектам».
Глупость эта ваша цитата.
Бордер не поддерживается у довольно большого количества HTML-объектов.
Попробуйте задать бордер, например, тегам <BR> или <HR>. Или тегу <HEAD>... :-))
Из табличных объектов бордер поддерживается только у четырёх тегов: TABLE, CAPTION, TH, TD.
Прочие табличные объекты, а именно - TBODY, THEAD, TFOOT, COL, COLGROUP и TR - бордер не поддерживают.
Всякие нюансы разных браузеров (если вдруг будут вами или кем-то другим обнаружены) следует отнести к мелким багам этих браузеров.
Ибо в приципе все браузеры должны полагать атрибут BORDER каким-то неизвестным новым атрибутом тегов TBODY, THEAD, TFOOT, COL, COLGROUP и TR и при его обнаружении в HTML-коде визуально не должны ничего отображать. | |
| |
|
|
| |
|
|
| |
для: PAT
(30.10.2008 в 13:20)
| | | Сделал так
<htnl>
<head>
<style>
table,tbody,tr,td { border:0; margin:0; padding:0; }
.td0,td { border:1px solid rgb(237,237,237); }
.td1,.td2,.td3 { border-style:solid; border-color:rgb(241,202,128); }
.td1 { border-width:2px 0px 2px 2px; }
.td2 { border-width:2px 0px 2px 0px; }
.td3 { border-width:2px 2px 2px 0px; }
</style>
</head>
<body>
<table id="tb">
<tr onclick="selectTR(this)"><td>11</td><td>12</td><td>13</td></tr>
<tr onclick="selectTR(this)"><td>21</td><td>22</td><td>23</td></tr>
<tr onclick="selectTR(this)"><td>31</td><td>32</td><td>33</td></tr>
</table>
<script>
var tr=null;
function selectTR(tr_new){
var tr_old=tr; tr=tr_new;
if(tr_old!=null){
tr_old=tr_old.getElementsByTagName("td");
for(var i=0; i < tr_old.length ;i++) tr_old[i].className="td0";
}
tr_new=tr_new.getElementsByTagName("td");
tr_new[0].className="td1";
for(var j=1; j < tr_new.length-1 ;j++) tr_new[j].className="td2";
tr_new[tr_new.length-1].className="td3";
}
</script>
</body>
</htnl>
Но видны разрывы в линиях из-за промежутков между ячейками таблицы. Если убрать промежутки между ячейками при помощи table { border-collapse: collapse; }, тогда в IE7 работает нормально, Chrome оставляет следы в виде желтых полосок при переключении между строками, FireFox перестает нормально отображать бордюр вокруг выделенной строки. | |
| |
|
|
