Question

我正在尝试设置width:13%列中的Date。但这对我不利。问题出在哪里？并且无法减少width列中的subject。预先感谢。

选中 FIDDLE

<div style="width:70%;float:left;">
   <div>
      <table style="width:100%;" class="TicketsDashboard">
         <tbody>
            <tr>
               <td style="width:13%"><b>Date</b></td>
               <td ><b>Type</b></td>
               <td ><b>Subject</b></td>
               <td ><b>Responsible</b></td>
               <td ><b>Action</b></td>
            </tr>
            <tr style="cursor:pointer;" onclick="openDetailDiv('PROT-155',124)">
               <td>2019-07-21 12:52:08</td>
               <td>Recommendation</td>
               <td>First Subject going on perfectly edited</td>
               <td>perfect</td>
               <td class="editButtonMain">Edit</td>
            </tr>
            <tr style="cursor:pointer;" onclick="openDetailDiv('PROT-155',125)">
               <td>2019-07-21 12:53:26</td>
               <td>Decision</td>
               <td>lklk kdj djjdjdjdjdjdjdjdjdjdjdjdjdjdjjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdj</td>
               <td>bangldesh</td>
               <td class="editButtonMain">Edit</td>
            </tr>
         </tbody>
      </table>
   </div>
   <br>
   <div id="ticketButtons"><input type="button" class="Btn" onclick="openDiag({function: &quot;item&quot;, id: 155, dialogTitle: this.value})" value="Add Protocol Item"></div>
</div>
<div style="width:30%;float:left">
   <table style="width:100%;" class="lightborder" id="headTable">
      <tbody>
         <tr id="slaTr">
            <td width="100" valign="top">SLA:</td>
            <td>
               <div id="effortDiv" style="width:50%;float:left;text-align:center;padding-bottom:10px;display:none"></div>
               <div id="timeDiv" style="text-align:center;padding-bottom:10px;display:none"></div>
            </td>
         </tr>
         <tr>
            <td width="100">Status:</td>
            <td id="statusTd">Suggestion</td>
         </tr>
         <tr>
            <td>Protocol Number:</td>
            <td id="breadCrumb">PROT-155</td>
         </tr>
         <tr>
            <td>Subject:</td>
            <td id="protsubject">Chonchol -- test</td>
         </tr>
         <tr>
            <td>Start Date:</td>
            <td id="protstartdate">0000-00-00 00:00:00</td>
         </tr>
         <tr>
            <td>End Date:</td>
            <td id="protenddate">0000-00-00 00:00:00</td>
         </tr>
         <tr>
            <td>Keeper:</td>
            <td id="protkeeper">ewrwer</td>
         </tr>
      </tbody>
   </table>
</div>

Answer 1

您的主题列即将消失，因为您没有在代码<td>lklk kdj djjdjdjdjdjdjdjdjdjdjdjdjdjdjjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdj</td>中使用空格，如果您想停止超出范围，可以给这样的空格<td>lklk kdj djjdjdjdjdjd jdjdjdjdjdjdjdj djjdjdjdjdjdjdj djdjdjdjdjdjdjdjdjdjdjdj djdjdjdjdjdjdjdjdjdjdjdjdjdjdj</td> 您实际上想得到什么，让我们清楚知道。

Answer 2

增加td的宽度而不是<td style="width:13%">给予<td style="padding-left:13%">
为避免溢出添加

<style> table { table-layout:fixed; } table td {word-wrap:break-word;} </style>

谢谢

Answer 3

其原因，您应该为每行中的给定列设置相同的样式，或者添加一个thead部分，在其中为该列设置一次。

如何在CSS中减少一列并增加另一列？

3 个答案: