如何在引导程序上设置 TD 宽度表？答案

【问题标题】：How to Set TD width Table on bootstrap?如何在引导程序上设置 TD 宽度表？
【发布时间】：2015-10-28 01:46:01
【问题描述】：

我在 Bootstrap 中有数据表 Jquery，就像这张图片

看起来不错，但是如果我调整浏览器的大小（在移动网络上查看）图片是这样的

我很困惑，我尝试在桌子上手动设置 Widht 但不起作用。

在我再次回到全屏（PC）后，数据表不会像这样居中。

我已尝试添加容器，但仍然无法正常工作。此代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Outbox</title>
    <!--link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"-->
    <link rel="stylesheet" href="../DT/bootstrap.min.css">
    <!--link rel="stylesheet" type="text/css" href="../bootstrap-3.3.5-dist/css/bootstrap.min.css"-->
    <link rel="stylesheet" href="../DT/dataTables.bootstrap.css">
    <link rel="stylesheet" href="../DT/responsive.bootstrap.css">

</head>

<body>
<div class="container">


<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Kokola Email Template</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="email-setting.php">Home <span class="sr-only">(current)</span></a></li>
                <li><a href="set.php">Set Header Footer</a></li>
                <li class="active"><a href="outbox.php">Outbox</a></li>
                <li><a href="logout.php">Sign Out</a></li>
            </ul>

        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>




<?php

if(isset($_POST[HAPUS]))
{  
  include "../koneksi.php";

  $idhe = $_POST[ID];

  $jumlah = count($idhe);

 // echo $jumlah;

  for($i=0;$i<=$jumlah;$i++)
  {
      //echo $idhe[$i]."<br>";  

      $sql = "DELETE FROM outbox WHERE ID = '$idhe[$i]'";

      //echo $sql;

      //$hasil = mysqli_query($mysqli, $sql);
      $hasil = mysql_query($sql);

  }//end for

  echo "<script>alert('Delete Berhasil dilakukan');</script>";



}

?>
<div class="center-block">
<form method="post" action="outbox.php">

<div style="margin-left:340px;margin-top:10px; margin-bottom:10px;"><!--a-- href="email-setting.php"><img src="back.png"/></a-->
&nbsp;&nbsp;<input type="submit" value="HAPUS" name="HAPUS" style="background-color:#F00;color:#FFF;border:0 none;
cursor:pointer;-webkit-border-radius: 5px;border-radius: 5px;padding:5px 15px;margin-left:420px;" /></div>


 <!-- style="font-family:Verdana, Geneva, sans-serif;" div style='overflow:auto;height:600px;width:700px;margin-left:300px;' style="font-family:Verdana, Geneva, sans-serif;font-size:12px;"-->
<table id="example" class="table table-striped table-bordered dt-responsive nowrap">
  <thead>
    <tr height="100">
    <td colspan="5" align="center"><h2>Outbox</h2></td>
  </tr>
  <tr height="50">
     <th align="center">Chek</th>
     <th align="center">Date Time</th>
     <th align="center">Tujuan</th>
     <th align="center">Subjek</th>
     <th align="center">Action</th>
  </tr>
  </thead>
  <tbody>
 <?php
 include "../koneksi.php";

 $sql = "SELECT * FROM outbox";

 //$hasil = mysqli_query($mysqli, $sql);
 $hasil = mysql_query($sql);

 while($data = mysql_fetch_array($hasil))
 { 

   echo "<tr height='50px'>";
     echo "<td align='center'><input type='checkbox' name='ID[]' value='$data[ID]'></td>";
     echo "<td width='100' align='center'>$data[tglwkt]</td>";
     echo "<td align='center'>$data[tujuan]</td>";
     echo "<td align='center'>$data[subjek]</td>";
     echo "<td align='center'><a href='detail.php?ID=$data[ID]'><input type='button' value='Detail' style='background:#F00;color:#FFF;'></a></td>";

   echo "</tr>";

 }


 ?>
  </tbody>


</table>
<!--/div-->
</form>
   </div><!--center-blcok-->

</div><!--end container-->



<!--script-- src="../bootstrap-3.3.5-dist/js/jquery.min.js"></script-->
<script src="../DT/jquery-1.11.2.min.js"></script>
<!--script src="../DT/jquery-1.11.3.min.js"></script-->
<!--script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script-->
<script src="../DT/bootstrap.min.js"></script>
<script src="../DT/jquery.dataTables.js"></script>
<script src="../DT/dataTables.bootstrap.js"></script>
<script src="../DT/dataTables.responsive.js"></script>

<script>
    $(document).ready(function() {
        $('#example').DataTable();
    } );
</script>

</body>
</html>

任何人都可以帮助解决此问题。我是 Bootstrap 的新手。

提前致谢。

【问题讨论】：

标签： jquery twitter-bootstrap datatables

【解决方案1】：

如果没有看到您的实际表格代码，这很困难，但要在移动设备上获得一个看起来不错的宽表格是很棘手的。 Bootstrap 有一个.responsive-table class，可以让表格在移动设备上水平滚动。

除此之外，我会查看正在将哪些样式写入移动设备尺寸的表格，还可以尝试更改 td 宽度，这可能是罪魁祸首。

还可以尝试删除“dt-responsive”和“nowrap”等类

【讨论】：

【解决方案2】：

您的问题可能是您没有将表格包装在容器、行和列 DIV 中吗？因此宽度不是动态设置的。

<div class="container">
    <div class="row">
        <div class="col-sm-12">
            <table id="example">
                ...
            </table>
        </div>
    </div>
</div>

顺便说一句。如果您可以设置一个 jsFiddle，它将有助于快速获得答案。

更新答案：

如果你只是想在父 div 的中心对齐表格，这可以通过 CSS 来完成。

#example {
    margin: 0 auto;
}

我这里做了一个jsFiddle作为例子：http://jsfiddle.net/DJRavine/cz1vpb1v/

【讨论】：

它可以工作，但回到电脑后，它仍然无法居中。有什么问题吗？
也许 CSS 之前已缓存在您的 PC 上？尝试硬刷新 IE / FF / CHROME：按住 Ctrl 并按 F5。消息来源：getfilecloud.com/blog/2015/03/…