如何仅使用CSS删除html列？

时间：2016-06-14 11:42:51

标签： html css css-tables

我有一个包含许多列的HTML <table>，所以当我的网页显示在移动浏览器上时，它太小了。所以我正在创建一个媒体查询，我想删除一些列（这并不重要）。

那么如何仅使用css删除html列？

例如，如何删除下一个示例中表格中间的“B”列：

table, th, td, tr{
  border:1px solid black;
}

table{
  width:100%;
}
<table>
<th>A</th>
<th>B</th>
<th>C</th>

<tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>

9 个答案:

答案 0 :(得分：3)

<style>
        table, th, td, tr{
  border:1px solid black;
}

table{
  width:100%;
}

  @media (max-width: 768px){

    tr th:nth-child(2),tr td:nth-child(2){

      display:none;
    }

  }
    </style>

答案 1 :(得分：2)

不是你要求的，但如何使表格可水平滚动？

只有在您使用overflow-x: auto时窗口无法容纳内容时，才会显示滚动条。

table,
th,
td,
tr {
  border: 1px solid black;
}
table {
  width: 100%;
}
.hscroll {
  overflow-x: auto;
}
.example {
  white-space: nowrap;
}
<div class="hscroll">
  <table>
    <thead>
      <tr>
        <th>A</th>
        <th>B</th>
        <th>C</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Jill</td>
        <td class="example">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
        <td>50</td>
      </tr>
    </tbody>
  </table>
</div>

答案 2 :(得分：1)

您可以使用第n个子项来管理表列。 

th:nth-child(2) { display:none; }

答案 3 :(得分：1)

如果您使用nth-child，则在添加/删除更多th / td时会导致问题。最好使用一个可以在整个应用程序中重用的类。

<table>
<th>A</th>
<th class="hide-on-mobile">B</th>
<th>C</th>

<tr>
    <td>Jill</td>
    <td class="hide-on-mobile">Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td class="hide-on-mobile">Jackson</td> 
    <td>94</td>
  </tr>
</table>

@media (max-width: 768px){
    hide-on-mobile{
      display:none;
    } 
  }

答案 4 :(得分：0)

要删除第二列：

Private Sub DeleteRow()
Dim iAlpha As Integer
Dim iBeta As Integer
Dim lLastRow As Long
Dim k As Integer, i As Integer

lLastRow = Worksheets("MyDataSheet").Cells(65536, 1).End(xlUp).Row

k = 1

For i = 1 To lLastRow
    If InStr(Worksheets("MyDataSheet").Cells(k, 1).Value, "Alpha") > 0 Then
        iAlpha = k 'get row containing Alpha
    ElseIf InStr(Worksheets("MyDataSheet").Cells(k, 1).Value, "Beta") > 0 Then
        iBeta = k 'get row containing Beta
        For j = (iAlpha + 1) To (iBeta - 1) 'Delete rows between Alpha and Beta
            Worksheets("MyDataSheet").Rows(iAlpha + 1).EntireRow.Delete
        Next
        k = iAlpha + 1
    End If
    k = k + 1
    lLastRow = lLastRow - iBeta + iAlpha + 1
Next
End Sub


table tr>th:nth-of-type(2),   table tr>td:nth-of-type(2){
    display: none;
}

table,
th,
td,
tr {
  border: 1px solid black;
}

table {
  width: 100%;
}

@media (max-width: 900px){ /* use your media breakpoint */
  table tr>th:nth-of-type(2),   table tr>td:nth-of-type(2){
    display: none;
  }
}

JSFiddle

注意：您的HTML无效 - <table> <tr> <th>A</th> <th id="foo">B</th> <th>C</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table>也必须位于th元素内。

答案 5 :(得分：0)

使用css :nth-child()和内部媒体查询写入样式来隐藏列：

＆＃13;
＆＃13; 
table, th, td, tr{
  border:1px solid black;
}

table {
  width:100%;
}

@media all and (max-width: 768px){
  table tr th:nth-child(2),
  table tr td:nth-child(2) {
    display: none;
  }
}
＆＃13; 
<table>
  <thead>
    <tr>
      <th>A</th>
      <th>B</th>
      <th>C</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jill</td>
      <td>Smith</td> 
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td> 
      <td>94</td>
    </tr>
  </tbody>
</table>
＆＃13;
＆＃13;
＆＃13;

答案 6 :(得分：0)

正确的方法是将col元素与visibility: collapse一起使用。

<colgroup>
  <col />
  <col />
  <col />
</colgroup>

col:nth-child(2) {
  visibility: collapse;
}

＆＃13;
＆＃13; 
table, th, td, tr {
  border: 1px solid black;
}
table {
  width: 100%;
}
col:nth-child(2) {
  visibility: collapse;
}
＆＃13; 
<table>
  <colgroup>
    <col />
    <col />
    <col />
  </colgroup>
  <thead>
    <tr>
      <th>A</th>
      <th>B</th>
      <th>C</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
    </tr>
  </tbody>
</table>
＆＃13;
＆＃13;
＆＃13;

即使您使用colspan，这种方式也能正常工作。

但是，请注意，在隐藏列之前将计算表的布局。最后，剩余的专栏不会增长，以使表格尊重width: 100%。如Dynamic effects中所述，这避免了昂贵的重新布局操作。为了弥补这一点，您可以将表格的宽度增加到100%以外。

＆＃13;
＆＃13; 
div {
  overflow: hidden;
  margin: 20px 0;
}
table, th, td, tr {
  border: 1px solid black;
}
table {
  width: 100%;
  table-layout: fixed;
}
table.grow {
  width: 150%;
}
col.hidden {
  visibility: collapse;
}
＆＃13; 
<div>
  Full table
  <table>
    <colgroup>
      <col />
      <col />
      <col />
    </colgroup>
    <thead>
      <tr>
        <th colspan="2">A B</th>
        <th>C</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
      </tr>
      <tr>
        <td colspan="2">Eve Jackson</td>
        <td>94</td>
      </tr>
    </tbody>
  </table>
</div>
<div>
  Hiding last column
  <table>
    <colgroup>
      <col />
      <col />
      <col class="hidden" />
    </colgroup>
    <thead>
      <tr>
        <th colspan="2">A B</th>
        <th>C</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
      </tr>
      <tr>
        <td colspan="2">Eve Jackson</td>
        <td>94</td>
      </tr>
    </tbody>
  </table>
</div>
<div>
  Hiding last column and enlarging table
  <table class="grow">
    <colgroup>
      <col />
      <col />
      <col class="hidden" />
    </colgroup>
    <thead>
      <tr>
        <th colspan="2">A B</th>
        <th>C</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
      </tr>
      <tr>
        <td colspan="2">Eve Jackson</td>
        <td>94</td>
      </tr>
    </tbody>
  </table>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 7 :(得分：0)

如果你必须使用html表，我建议使用stacktable.js。否则使用css显示表。

答案 8 :(得分：-1)

由于每个人都直接前进，我建议您 bootstrap - 在处理响应式设计时，这会在很多情况下帮助您。安装后，您必须修改您的代码：

    //db connection

     global $conn;

        $servername = "localhost";  //host name

        $username = "cab"; //username

        $password = "a321"; //password

        $mysql_database = "ppwxpjey_mcidb"; //database name

    //mysqli prepared statement 

        $conn = mysqli_connect($servername, $username, $password) or die("Connection failed: " . mysqli_connect_error());

        mysqli_select_db($conn,$mysql_database) or die("Opps some thing went wrong");

        $termOrd = "%{$_POST['termOrd']}%";

        $stmt = $conn->prepare("select * from booking where order_no like ? ");
                    $stmt->bind_param('s',$termOrd);
                    $stmt->execute();
                    $get_result= $stmt->get_result();
                    $row_count= $stmt->affected_rows;

                    if($row_count>0)
                    {
                       while($row=$get_result->fetch_assoc())
                       {

                          echo "<table width='1000' border='2' align='center' style='background-color:#FFFFFF;border-collapse:collapse;border:2px solid #6699FF;color:#000000'><tr><th>ORDER NO</th><th>NAME</th><th>MOBILE</th><th>FROM PLACE</th><th>TO PLACE</th><th>JOURNEY DATE</th><th>JOURNEY TIME</th><th>PERSON</th><th>BOOKING TIME</th></tr>";
                            echo "<tr><td>".$row["ORDER_NO"]."</td><td>".$row["NAME"]."</td><td>".$row["MOBILE"]."</td><td>".$row["FROM_PLACE"]."</td><td>".$row["TO_PLACE"]."</td><td>".$row["JOURNEY_DATE"]."</td><td>".$row["JOURNEY_TIME"]."</td><td>".$row["PERSON"]."</td><td>".$row["UPDATE_TIME"]."</td></tr>";
                            echo '<br/>';

                       }


                    }
                    $stmt->close();
                     $conn->close();

您可以在this question了解更多相关信息。

相关问题
最新问题