为了账号安全,请及时绑定邮箱和手机立即绑定

如何设置div表中列的宽度?

如何设置div表中列的宽度?

一只甜甜圈 2024-01-22 20:55:56
添加行后,设置列宽出现问题。如果运行代码片段,可以非常清楚地看到单元格大小与指定值不匹配。在下面的情况下如何设置列的宽度?.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>
查看完整描述

3 回答

?
慕的地8271018

TA贡献1796条经验 获得超4个赞

你需要考虑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>


查看完整回答
反对 回复 2024-01-22
?
千巷猫影

TA贡献1829条经验 获得超7个赞

[您修改后的代码]


//你好,//你应该尝试这个


//我忘了还有一个属性max-width,


.divTableCell, .divTableHead {

  border: 1px solid #999999;

  display: table-cell;

  overflow: hidden;

  max-width: 120px!important;


查看完整回答
反对 回复 2024-01-22
?
陪伴而非守候

TA贡献1757条经验 获得超8个赞

表格必须由div组成吗?

如果没有,请使用 HTML<table>标记并显式设置其宽度及其显示属性。

然后您可以设置列的宽度:

https://codepen.io/daniel-knights/pen/KKdgYzW


查看完整回答
反对 回复 2024-01-22
  • 3 回答
  • 0 关注
  • 128 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信