删除 2 个表格元素之间不需要的间距 ( )

问题描述 投票：0回答：4

我需要使用 

<table>
元素创建页面布局。我遇到的问题是它在 DOM 中自动生成额外不需要的间距，以 
&nbsp
的形式。我怎样才能删除它？

查看图片： enter image description here 结果： enter image description here

挑战：

我面临的挑战。我只能使用内联样式，不能使用javascript，而且我不能使用flex代替表格。因为它将在电子邮件中使用。并非所有电子邮件客户端都支持 Flex。

<div style="width:375px;margin:0 auto;font-family: Helvetica,sans-serif;"> <table style="width:100%;background-color: aliceblue;border-bottom: 1px #539ecb solid; border-top: 1px #539ecb solid;color: #334859; text-transform: uppercase;padding:0 15px;"> <!-- Entries Header --> <tr> <td style="padding:3px 0;width: 47%;"> <h5 style="margin:0;">Description</h5> </td> <td style="text-align: center;width: 25%;"> <h5 style="margin:0;">Qty</h5> </td>&nbsp; <td style="text-align: right;"> <h5 style="margin:0;">Amount</h5> </td> </tr> </table> <table style="width: 100%;padding:0 15px;"> <!-- Entries --> <tr> <td style="padding:5px 0;width: 50%;"> <span style="text-transform: uppercase;font-size: 13px;">Office desk</span> </td> <td style="padding:5px 0;text-align: center;width: 25%;"> <small style="margin: 0;font-size: 11px;">2 x $217.75</small> </td>&nbsp; <td style="padding:5px 0;text-align:right;"> <span style="margin: 0;font-size: 13px;">$435.50</span> </td> </tr> </table> </div>





    

	


html

css

html-table


4个回答




    
    
    

        

            

                

                    
3
投票

                    

                

            

        

        
问题似乎是您故意在表格中添加的
&nbsp;
。 HTML 对于什么可以或不可以是各种表格元素的直接子元素有严格的规则。

文本节点
不能是
tr的直接子节点，只能包含
:


零个或多个 td、th 和脚本支持元素。




因此，
&nbsp;
文本节点被推到表格之外。删除这些，视觉布局将被修复（不过，我仍然建议修复标记的语义）。


原答案如下

无论如何，您的 HTML 格式都是错误的。看似表格标题行和正文行的内容被表示为 2 个单独的表格。尝试这样的事情：

<table style="border-collapse: collapse;">
  <thead style="/* styles from what's currently your first table */">
    <tr>
      <!-- content from what's currently your first table -->
      <th>...</th>
      <th>...</th>
      <th>...</th>
    </tr>
  </thead>
  <tbody style="/* styles from what's currently your second table */">
    <tr>
      <!-- content from what's currently your second table -->
      <td>...</td>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody>
</table>


    


您可以将 

    

    
    
    

    

        

            

                

                    
1
投票

                    
                

            

        

        
 替换为空字符串。






document.querySelector("#our_div").innerHTML = document.querySelector("#our_div").innerHTML.replace(/&nbsp;/g, '');


<div id="our_div" style="width:375px;margin:0 auto;font-family: Helvetica,sans-serif;display:block;">
  <table style="width:100%;background-color: aliceblue;border-bottom: 1px #539ecb solid; 
                    border-top: 1px #539ecb solid;color: #334859; text-transform: uppercase;padding:0 15px;">
            <!-- Entries Header -->
            <tr>
                <td style="padding:3px 0;width: 47%;">
                    <h5 style="margin:0;">Description</h5>
                </td>
                <td style="text-align: center;width: 25%;">
                    <h5 style="margin:0;">Qty</h5>
                </td>&nbsp;
                <td style="text-align: right;">
                    <h5 style="margin:0;">Amount</h5>
                </td>
            </tr>
        </table>
        <table style="width: 100%;padding:0 15px;">
            <!-- Entries -->
            <tr>
                <td style="padding:5px 0;width: 50%;">
                    <span class="item-name" style="text-transform: uppercase;font-size: 13px;">Office desk</span>
                </td>
                <td style="padding:5px 0;text-align: center;width: 25%;">
                    <small class="qty" style="margin: 0;font-size: 11px;">2 x $217.75</small>
                </td>&nbsp;
                <td style="padding:5px 0;text-align:right;">
                    <span class="item-price" style="margin: 0;font-size: 13px;">$435.50</span>
                </td>
            </tr>
        </table>
</div>




这是纯 CSS 解决方案。将 
font-size:0
 调整为 
div
，将 
font-size:1rem
 调整为 
table
。 CSS 无法删除它，但可以隐藏。






#our_div {
  font-size:0;
}

#our_div table {
  font-size:1rem;
}


<div id="our_div" style="width:375px;margin:0 auto;font-family: Helvetica,sans-serif;font-size:0;">
<table style="width:100%;background-color: aliceblue;border-bottom: 1px #539ecb solid; 
                    border-top: 1px #539ecb solid;color: #334859; text-transform: uppercase;padding:0 15px;">
            <!-- Entries Header -->
            <tr>
                <td style="padding:3px 0;width: 47%;">
                    <h5 style="margin:0;">Description</h5>
                </td>
                <td style="text-align: center;width: 25%;">
                    <h5 style="margin:0;">Qty</h5>
                </td>&nbsp;
                <td style="text-align: right;">
                    <h5 style="margin:0;">Amount</h5>
                </td>
            </tr>
        </table>
        <table style="width: 100%;padding:0 15px;">
            <!-- Entries -->
            <tr>
                <td style="padding:5px 0;width: 50%;">
                    <span class="item-name" style="text-transform: uppercase;font-size: 13px;">Office desk</span>
                </td>
                <td style="padding:5px 0;text-align: center;width: 25%;">
                    <small class="qty" style="margin: 0;font-size: 11px;">2 x $217.75</small>
                </td>&nbsp;
                <td style="padding:5px 0;text-align:right;">
                    <span class="item-price" style="margin: 0;font-size: 13px;">$435.50</span>
                </td>
            </tr>
        </table>
</div>



    




用 JS 来做会好得多。在 CSS 中，您可以尝试为 div 容器设置一些字体样式以隐藏“ ”字符，并将样式设置为表格的初始值（这样它们就不会从容器继承值）。

    

    
    
    

    

        

            

                

                    
0
投票

                    
                

            

        

        
div{
  font-size:0;
  line-height:0;
  color: transparent;
  user-select: none;
}

div>table{
  font-size: 16px; //or any other
  line-height: normal;  //or any other
  color: black;  //or any other
  user-select: auto;
}


    



    

    
    
    

    

        

            

                

                    
0
投票

                    
                

            

        

        




<div style="width:375px;margin:0 auto;font-family: Helvetica,sans-serif;">
  <table style="width:100%;background-color: aliceblue;border-bottom: 1px #539ecb solid; 
                    border-top: 1px #539ecb solid;color: #334859; text-transform: uppercase;padding:0 15px;">
      <!-- Entries Header -->
      <tr>
          <td style="padding:3px 0;width: 47%;">
              <h5 style="margin:0;">Description</h5>
          </td>
          <td style="text-align: center;width: 25%;">
              <h5 style="margin:0;">Qty</h5>
          </td>&nbsp;
          <td style="text-align: right;">
              <h5 style="margin:0;">Amount</h5>
          </td>
      </tr>
  </table>
  <table style="width: 100%;padding:0 15px;">
      <!-- Entries -->
      <tr>
          <td style="padding:5px 0;width: 50%;">
              <span style="text-transform: uppercase;font-size: 13px;">Office desk</span>
          </td>
          <td style="padding:5px 0;text-align: center;width: 25%;">
              <small style="margin: 0;font-size: 11px;">2 x $217.75</small>
          </td>&nbsp;
          <td style="padding:5px 0;text-align:right;">
              <span style="margin: 0;font-size: 13px;">$435.50</span>
          </td>
      </tr>
  </table>
</div>






你好世界

    

	



    

    


  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.