css 怎么会< td>溢出呢< table>?

4sup72z8  于 5个月前  发布在  其他
关注(0)|答案(2)|浏览(53)

我在<td>中添加了一个下一个和上一个按钮,其中包含一个asp:DropDownList。当我这样做时,<td>溢出了表的宽度。
代码摘要(编辑以包括整个表,以避免混淆):

<table class="DataEntry" border="1">
  <caption>Adding New Record</caption>
  <tr>
    <th scope="col" colspan="3">&nbsp;&nbsp;Add To Invoice&nbsp;&nbsp;</th>
  </tr>
  <tr>
    <td colspan="3" >
     <div style="white-space:nowrap;">
       <asp:ImageButton ID="PreviousInvoiceAdding" runat="server" ImageUrl="~/Images/Previous16x16.png" OnClick="PreviousInvoice_Click" ToolTip="Previous" />
       <asp:DropDownList ID="DropDownListInvoice" runat="server" AutoPostBack="true" CssClass="rMidiEntrySelect" OnSelectedIndexChanged="DropDownListInvoice_SelectedIndexChanged" />
       <asp:ImageButton ID="NextInvoiceAdding" runat="server" ImageUrl="~/Images/Next16x16.png" OnClick="NextInvoice_Click" ToolTip="Next" />
     </div>
    </td>
  </tr>
  <tr>
    <th scope="col">&nbsp;&nbsp;Cost&nbsp;&nbsp;</th>
    <th scope="col" colspan="2">&nbsp;&nbsp;Date Purchased&nbsp;&nbsp;</th>
  </tr>
  <tr>
    <td>
       <asp:TextBox ID="Cost" runat="server" CssClass="rMidiEntryText" MaxLength="8"/>
    </td>
    <td colspan="2">
      <div style="text-align: center">
         <asp:Label ID="DatePurchased" runat="server" class="rMidiEntryLabel"/>
      </div>
    </td>
  </tr>
  <tr>
    <th scope="col">&nbsp;&nbsp;Volume Type&nbsp;&nbsp;</th>
    <th scope="col">&nbsp;&nbsp;Measurement&nbsp;&nbsp;</th>
    <th scope="col">&nbsp;&nbsp;Units&nbsp;&nbsp;</th>
  </tr>
  <tr>
    <td>
       <select ID="SelectVolumeType" name="Measurement" runat="server" class="rMidiEntrySelect" disabled >
           <option value="0">Liquid</option>
           <option value="1">Weight</option>
       </select>
    </td>
    <td>
       <asp:DropDownList  ID="SelectMeasurement" runat="server" AutoPostBack="true" CssClass="rMidiEntrySelect" />
    </td>
    <td>
        <asp:TextBox ID="Units" runat="server" CssClass="rMidiEntryText" />
    </td>
  </tr>
  <tr>
    <th scope="col" colspan="3">&nbsp;&nbsp;Invoice Reference&nbsp;&nbsp;</th>
  </tr>
  <tr>
    <td colspan="3">
        <asp:TextBox ID="InvoiceRef" runat="server" CssClass="rMidiEntryText" MaxLength="100"/>
    </td>
  </tr>
</table>

字符集
测试结果:


的数据
<table>上的class="DataEntry"asp:DropDownList上的CssClass="rMidiEntrySelect"没有引起任何问题(因为我已经剥离了它们来验证)。
我已经尝试了一些变化,如<td colspan="3" style="white-space:nowrap;">没有<div>没有运气。
没有Previous和Next按钮:

<table class="DataEntry" border="1">
  <caption>Adding New Record</caption>
  <tr>
    <th scope="col" colspan="3">&nbsp;&nbsp;Add To Invoice&nbsp;&nbsp;</th>
  </tr>
  <tr>
    <td colspan="3" >
      <asp:DropDownList ID="DropDownListInvoice" runat="server" AutoPostBack="true" CssClass="rMidiEntrySelect" OnSelectedIndexChanged="DropDownListInvoice_SelectedIndexChanged" />
    </td>
  </tr>
  .
  .
  .
</table>



根据要求提供相关CSS:

table.DataEntry {
border-color: #00274C;
border-style: solid;
border-width: 2px;
border-collapse: collapse;
padding: 4px; 
color: white;
font-size: 10pt;
}

table.DataEntry caption {
background-color: #004280;
color: #FFD11A;/* #FFCB05;*/
border-color: #00274C;
border-style: solid;
border-width: 2px;
border-collapse: collapse;
padding: 4px;
font-weight: bold;
font-size: 12pt;
white-space: nowrap;
text-decoration: underline;
text-underline-position: under;
text-align:center; 
caption-side: top;
vertical-align: top;
}

table.DataEntry th {
background-color: #00274C;
color: #FFCB05;
text-align:center; 
}

.rMidiEntryLabel {
width: 100%;
color: white;
background-color: black; 
padding-left: 4px;  
padding-right: 2px;
border-style: none;
text-align: center !important;
}

.rMidiEntryText {
width: 100%;
color: white;
background-color: black; 
padding-left: 4px;  
padding-right: 2px;
border-style: none;
text-align: center !important;
}

.rMidiEntrySelect {
width: 100%;
color: white;
background-color: black; 
padding-left: 4px;  
padding-right: 2px;
text-align: center !important;
}


CSS的其余部分都是bootstrap(我不认为这是相关的)。
HTML输出请求(看起来很好我):

<tr>
  <td colspan="3" >
   <div style="white-space:nowrap;">
     <input type="image" name="ctl00$MainContent$PreviousInvoiceAdding" id="MainContent_PreviousInvoiceAdding" title="Previous" src="Images/Previous16x16.png" />
     <select name="ctl00$MainContent$DropDownListInvoice" onchange="javascript:setTimeout(&#39;__doPostBack(\&#39;ctl00$MainContent$DropDownListInvoice\&#39;,\&#39;\&#39;)&#39;, 0)" id="MainContent_DropDownListInvoice" class="rMidiEntrySelect">
  <option selected="selected" value="ee29b399-34a7-4024-819d-790c9903d4b5~12/11/2023 12:00:00 PM">PayPal: 53S99726XA966511X Brian Garmins Jr.</option>
  <option value="3013ce76-18e3-4458-b4c0-1c17ca46a503~11/28/2023 12:00:00 PM">PayPal: 6F945766E4687834E Nelson Laquindanum</option>
  <option value="722137b5-3201-408a-bd90-9cac6d72829f~11/23/2023 12:00:00 PM">Amazon 111-3584319-8686651</option>
  <option value="4aee9017-8930-4028-ad3f-ff1c494e91bb~10/30/2023 12:00:00 PM">PayPal: 8FL63970TJ5988418 Shake Ums</option>
  <option value="b9995175-f516-4366-9b30-32f03830c724~10/25/2023 12:00:00 PM">PayPal: 4WR12564FW882444X Brett Shumock</option>
  <option value="ec0f668b-1fe7-4424-9264-fc0825b9e999~10/18/2023 12:00:00 PM">PayPal: 6L091961CE7545104 Brandon Reigert</option>
  
  </select>
     <input type="image" name="ctl00$MainContent$NextInvoiceAdding" id="MainContent_NextInvoiceAdding" title="Next" src="Images/Next16x16.png" />
   </div>
  </td>
</tr>


我问我的问题是由于我看到的结果似乎打破了基本的HTML规则。TD是TR的孩子。TR是TABLE的孩子。TABLE是包含所有内容的“容器”。TABLE中的任何内容都不能超出TABLE的边界。

x8diyxa7

x8diyxa71#

不能告诉你为什么,确切地说,但它肯定是DropDownListInvoice上的width: 100%导致溢出,当结合容器div的white-space:nowrap;规则时。
在jsFiddle中运行,使用这些规则:
x1c 0d1x的数据
但要去掉这两条规则



我怀疑这与浏览器如何计算元素宽度有关。

  • 表占用其父表的100%宽度
  • 表行占用其父表的100%宽度
  • 表数据单元格占用父表行的100%宽度(因为它是此行中唯一的单元格,并且具有覆盖整行的列跨度)
  • 输入是内联的,所以它们只占用必要的宽度
  • select占据父单元格的100%宽度

通常情况下,最后一位是可以的--输入和选择会堆叠起来。但是,无换行规则强制它们在一行内容中,这也会导致它们溢出包含它们的div。
您可以使用这个jsFiddle,它显示了溢出的是表单元素:https://jsfiddle.net/p8oqfw7h/1/
如果你想完成最后一张图片而不考虑内容,你可能会想玩一下flex-box。我现在没有一个解决方案来展示如何实现这一点,尽管如果你熟悉flex-box,它应该不会太难。

j13ufse2

j13ufse22#

我只是把display:flex放在这个div标签中:<div style="white-space:nowrap;display: flex;">

table.DataEntry {
border-color: #00274C;
border-style: solid;
border-width: 2px;
border-collapse: collapse;
padding: 4px; 
color: white;
font-size: 10pt;
}

table.DataEntry caption {
background-color: #004280;
color: #FFD11A;/* #FFCB05;*/
border-color: #00274C;
border-style: solid;
border-width: 2px;
border-collapse: collapse;
padding: 4px;
font-weight: bold;
font-size: 12pt;
white-space: nowrap;
text-decoration: underline;
text-underline-position: under;
text-align:center; 
caption-side: top;
vertical-align: top;
}

table.DataEntry th {
background-color: #00274C;
color: #FFCB05;
text-align:center; 
}

.rMidiEntryLabel {
width: 100%;
color: white;
background-color: black; 
padding-left: 4px;  
padding-right: 2px;
border-style: none;
text-align: center !important;
}

.rMidiEntryText {
width: 100%;
color: white;
background-color: black; 
padding-left: 4px;  
padding-right: 2px;
border-style: none;
text-align: center !important;
}

.rMidiEntrySelect {
width: 100%;
color: white;
background-color: black; 
padding-left: 4px;  
padding-right: 2px;
text-align: center !important;
}

个字符

相关问题