HTMLのtrタグで設定した枠線が表示されない問題の解決方法_html/css

HTMLのtrタグで設定した枠線が表示されない問題の解決方法_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:42:56

オリジナル

2008 人が閲覧しました

今日テーブルを操作していたら、テーブルの行の境界線が表示されていないことに気づき、新しいテーブルを作成したところ、確かに表示されていないことがわかりました

えー

ブラウザでプレビューしてみました。は表示されませんでした

後で、上一句代码就显示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><style> }   tr{       border:1px solid #ccc;        }</style><body><table>   <tr>      <td>内容</td>      <td>内容</td>      <td>内容</td>   </tr>    <tr>      <td>内容</td>      <td>内容</td>      <td>内容</td>   </tr>    <tr>      <td>内容</td>      <td>内容</td>      <td>内容</td>   </tr></table></body></html>

ログイン後にコピー

後来查了低册对该属性の定义

CSS border-collapse property

を追加するだけでよいことがわかりました

である表格配置結合并边框モデル:

プロパティ定義义及使用说明

border -collapse 属性は、テーブルの境界線を 1 つの境界線に結合するか、標準 HTML のように個別に表示するかを設定します。

デフォルト: 継承: バージョン: JavaScript 構文:

個別

はい

CSS2

object object.style.borderCollapse="collapse"

ブラウザのサポート

すべての主要なブラウザは、border-collapse 属性をサポートしています。

注: Internet Explorer (IE9 を含む) のどのバージョンでも、属性値「inherit」がサポートされています。

注: border-collapse 属性、!DOCTYPE が指定されていない場合、予期しない効果が生じる可能性があります。

プロパティ値

値の説明

collapse	可能であれば、境界線は 1 つの境界線にマージされます。 border-spacing および empty-cells プロパティは無視されます
別々	デフォルト値。国境は分離されます。 border-spacing 属性と empty-cells 属性は無視されません
inherit	border-collapse 属性の値が親要素から継承されることを指定します