divテーブルの列の幅を設定するにはどうすればよいですか？

debugcn 投稿 Dev

WEB_D

行を追加した後、列幅の設定に問題がありました。スニペットを実行すると、セルサイズが指定された値と一致しないことが非常にはっきりとわかります。

以下の場合、列の幅を設定するにはどうすればよいですか？

.divTable{
	display: table;
	width: 100%;
}
.divTableRow {
	display: table-row;
}
.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
}
.divTableCell, .divTableHead {
	border: 1px solid #999999;
	display: table-cell;
	padding: 3px 10px;
 

}
.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
	font-weight: bold;
}
.divTableFoot {
	background-color: #EEE;
	display: table-footer-group;
	font-weight: bold;
}
.divTableBody {
	display: table-row-group;
}

<div class="divTable" style="border: 1px solid #000;">
<div class="divTableBody">
<div class="divTableRow">

<div class="divTableCell" style="width:10%">&nbsp;</div>
<div class="divTableCell" style="width:40%">&nbsp;</div>
<div class="divTableCell" style="width:50%">&nbsp;</div>
</div>
<div class="divTableRow">
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
</div>

<div class="divTableRow" >texttexttexttexttexttexttexttexttexttexttexttexttexttexttextte xttexttexttexttexttexttextt exttexttexttexttextt xttexttexttexttexttexttex ttexttext</div>
<div class="divTableRow">

<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
</div>
</div>
</div>

アフィフに同行

あなたは考慮する必要があります table-layout: fixed;

.divTable {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.divTableRow {
  display: table-row;
}

.divTableHeading {
  background-color: #EEE;
  display: table-header-group;
}

.divTableCell,
.divTableHead {
  border: 1px solid #999999;
  display: table-cell;
  padding: 3px 10px;
}

.divTableHeading {
  background-color: #EEE;
  display: table-header-group;
  font-weight: bold;
}

.divTableFoot {
  background-color: #EEE;
  display: table-footer-group;
  font-weight: bold;
}

.divTableBody {
  display: table-row-group;
}

<div class="divTable" style="border: 1px solid #000;">
  <div class="divTableBody">
    <div class="divTableRow">

      <div class="divTableCell" style="width:10%">&nbsp;</div>
      <div class="divTableCell" style="width:40%">&nbsp;</div>
      <div class="divTableCell" style="width:50%">&nbsp;</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">&nbsp;</div>
      <div class="divTableCell">&nbsp;</div>
      <div class="divTableCell">&nbsp;</div>
    </div>

    <div class="divTableRow">texttexttexttexttexttexttexttexttexttexttexttexttexttexttextte xttexttexttexttexttexttextt exttexttexttexttextt xttexttexttexttexttexttex ttexttext</div>
    <div class="divTableRow">

      <div class="divTableCell">&nbsp;</div>
      <div class="divTableCell">&nbsp;</div>
      <div class="divTableCell">&nbsp;</div>
    </div>
  </div>
</div>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]