Question

我有一张如下表格

＆＃13;

table, th, td {
    border: 1px solid black;
}

.cell-hidden{
	display:none;
}

＆＃13;

<table>
  <tr><td colspan="1" rowspan="7" >Neil</td></tr>
  <tr></tr>
  <tr><td >Jianlin</td></tr>
  <tr></tr>
  <tr><td >Rachel</td></tr>
  <tr></tr>
  <tr><td >Neil</td></tr>
  <tr><td colspan="2">total</td></tr>
</table>

＆＃13;

它在 chrome （image）中看起来正确，但 safari （mac或ipad pro）错误），它看起来像：

new questions image

如何使用 chrome 执行相同的结果（无法更改<tg>，有时我需要空<tr>）

Answer 1

它们在你的布局中是空的。如果它们不重要，请删除它们。

table, th, td {
    border: 1px solid black;
}
.cell-hidden{
	display:none;
}

<table>
  <tr><td colspan="1" rowspan="8" >Neil</td></tr>

  <tr><td >Jianlin</td></tr>
 
  <tr><td >Rachel</td></tr>
  
  <tr><td >Neil</td></tr>
</table>

Answer 2

也许尝试使用jQuery：

$('tr').each(function() {
   if($(this).find('td').length == 0) {
     $(this).hide();
   }
});

Answer 3

使用CSS ：空选择器隐藏空＆lt; tr＆gt;标签

tr:empty{
    display: none;
}
table, th, td {
    border: 1px solid black;
}
.cell-hidden{
    display:none;
}

<table>
  <tr><td colspan="1" rowspan="8" >Neil</td></tr>
  <tr></tr>
  <tr><td >Jianlin</td></tr>
  <tr></tr>
  <tr><td >Rachel</td></tr>
  <tr></tr>
  <tr><td >Neil</td></tr>
</table>

Answer 4

我认为这可以帮到你〜

我使用javascript和css删除空tr。

更新：这是您代码的更新版本。

＆＃13;

while($rows3=mysqli_fetch_array($result3)){

＆＃13;

            <input type="submit" name="submit" class="submit"/> <!--Submit button-->
            <table border="1" class="table"> 
                <tr>
                    <th> Colum1 </th> 
                    <th> Column5 </th>
                    <th> Column6 </th>
                </tr>
                <?php
                    if(isset($_POST['submit'])){
                        $Droplistpost1=$_POST['Droplist1']; 
                        $Droplistpost2=$_POST['Droplist2'];

                        $query3="SELECT Colum1, Column5, Column6 
                                 FROM table
                                 WHERE rowsData1 ='.$Droplistpost1' AND rowsData2='.$Droplistpost2'";
                        $result3=mysqli_query($con,$query3);

                        while($rows3=mysqli_fetch_array($result3)){ 
                            $Colum1=$rows3['Colum1'];
                            $Column5=$rows3['Column5'];
                            $Column6=$rows3['Column6'];
                            ?>
                            <tr>    
                            <td><?php echo $Colum1 ?></td>
                            <td><?php echo $Column5 ?></td>
                            <td><?php echo $Column6 ?></td>
                            </tr>
                            <?php
                        }
                    }
                ?>
            </table>
        </form>

＆＃13;

var trList = document.querySelectorAll('tr');
var counter = 0;
var tdTop;

if (trList) {
  trList.forEach(function(element) {
    if (element.innerHTML.length == 0) {
      element.style.display = 'none';
    } else {
      var tdElement = element.querySelector('td');

      if (tdElement) {
        counter++;
        if (counter == 1) {
          tdTop = tdElement
        }
        if (tdElement.colSpan == 2) {
          counter--;
        }
      }
    }
  });
  if (tdTop) {
    tdTop.rowSpan = counter;
  }
}

＆＃13;

在safari中html标签rowspan不正确

4 个答案: