Html 如何在不同屏幕尺寸的表格中制作固定td_Html_Css_Twitter Bootstrap 3

Html 如何在不同屏幕尺寸的表格中制作固定td

html css twitter-bootstrap-3

Html 如何在不同屏幕尺寸的表格中制作固定td,html,css,twitter-bootstrap-3,Html,Css,Twitter Bootstrap 3,我有表格包含表格有6个列，我想让表格的td固定为不同的屏幕大小（笔记本电脑、ipad、手机等），只需添加不同大小的滚动条 <form id="NewCustFrm" style="border:2px solid rgb(16,29,73);"> <table class="table2"> <tr> <td><label class="arrow-right"> First Name:</label>

我有

表格

包含

表格

有6个

列

，我想让

表格

的

td

固定为不同的屏幕大小（笔记本电脑、ipad、手机等），只需添加不同大小的滚动条

<form id="NewCustFrm" style="border:2px solid rgb(16,29,73);">
    <table class="table2">
    <tr>
    <td><label class="arrow-right"> First Name:</label></td>
    <td> 
    <div class="input-group">
        <span class="input-group-addon"><i class="fa fa-user"></i></span>
        <input  name="first_name" placeholder="First Name" class="form-control"  type="text">
    </div>
    </td>
    <td><label class="arrow-right"> Last Name:</label></td>
    <td> 
    <div class="input-group">
        <span class="input-group-addon"><i class="fa fa-user"></i></span>
        <input  name="Last_name" placeholder="Last Name" class="form-control"  type="text">
    </div>
    </td>
    <td><label class="arrow-right"> Nick Name:</label></td>
    <td>
    <div class="input-group">
        <span class="input-group-addon"><i class="fa fa-user"></i></span>
        <input  name="Nick_name" placeholder="Nick Name" class="form-control" type="text">
    </div>
    </td>
    </tr>
    <tr>
    <td><label class="arrow-right"> Facebook name:</label></td>
    <td>
    <div class="input-group">
        <span class="input-group-addon"><i class="fa fa-facebook"></i></span>
        <input  name="Facebook_name" placeholder="Facebook Name" class="form-control" type="text">
    </div>
    </td>
    <td><label class="arrow-right"> Email Address:</label></td>
    <td>
    <div class="input-group">
        <span class="input-group-addon"><i class="fa fa-at"></i></span>
        <input  name="email" placeholder="E-Mail Address" class="form-control" type="text">
    </div>
    </td>
    <td><label class="arrow-right"> Birth Date:</label></td>
    <td>
    <div class='input-group date' class='datetimepicker8'>
        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
        <input type='text' class="form-control" class="Frm_Date" />
    </div>
    </td>
    </tr>
    <tr>
    <td><label class="arrow-right"> Organization Name:</label></td>
    <td>
    <div class="input-group">
        <span class="input-group-addon"><i class="fa fa-building"></i></span>
        <input  name="Organization_Name" placeholder="Organization Name" class="form-control" type="text">
    </div>
    </td>
    <td><label class="arrow-right"> Celfone Number:</label></td>
    <td>
    <div class="input-group">
        <span class="input-group-addon"><i class="fa fa-phone"></i></span>
        <input  name="Celfone_Number" placeholder="Celfone Number" class="form-control" type="text">
    </div>
    </td>
    <td><label class="arrow-right"> Landline Number:</label></td>
    <td>
    <div class="input-group">
        <span class="input-group-addon"><i class="fa fa-phone"></i></span>
        <input  name="Landline_Number" placeholder="Landline Number" class="form-control" type="text">
    </div>
    </td>
    </tr>
    <tr>
    <td><label class="arrow-right"> Branch:</label></td>
    <td>
    <div class="input-group">
        <span class="input-group-addon"><i class="fa fa-building-o"></i></span>
        <input  name="Branch" placeholder="Branch" class="form-control" type="text">
    </div>
    </td>
    <td><label class="arrow-right"> Barangay:</label></td>
    <td>
    <div class="input-group">
        <span class="input-group-addon"><i class="fa fa-home"></i></span>
        <select class="SelectCust" name="BarangayName" id="BarangayName">
        <!--populate value using php-->
        <?php
             $stmt ="SELECT distinct Barangay_Name FROM Barangay";
             foreach ($conn->query($stmt) as $row) {
        ?>
        <option value="<?php echo $row['ID'];?>"><?php echo $row['Barangay_Name'];?></option>
        <?php}?>
        </select>
    </div>
    </td>
    <td><label class="arrow-right"> Address:</label></td>
    <td>
    <div class="input-group">
        <span class="input-group-addon"><i class="fa fa-home"></i></span>
        <input  name="Address" placeholder="Address" class="form-control" type="text">
    </div>
    </td>
    </tr>
    <tr>
    <td><label class="arrow-right"> Other Contact Name:</label></td>
    <td>
    <div class="input-group">
        <span class="input-group-addon"><i class="fa fa-user"></i></span>
        <input  name="Contact_name" placeholder="Contact Name" class="form-control" type="text">
    </div>
    </td>                                   
    <td><label class="arrow-right"> Contact Number:</label></td>
    <td>
    <div class="input-group">
        <span class="input-group-addon"><i class="fa fa-phone"></i></span>
        <input  name="Contact_Number" placeholder="Contact Number" class="form-control" type="text">
    </div>
    </td>
    <td><label class="arrow-right"> Other Address:</label></td>
    <td>
    <div class="input-group">
        <span class="input-group-addon"><i class="fa fa-home"></i></span>
        <input  name="Other_Address" placeholder="Other Address" class="form-control" type="text">
    </div>
    </td>
    </tr>
    <tr>
    <td><label class="arrow-right"> Photo:</label></td>
    <td colspan="5"><!-- <label class="custom-file">
        <input type="file" id="file" class="custom-file-input">
        <span class="custom-file-control"></span>
        </label> -->
    </td>
    </tr>
    <tr>
    <td><label class="arrow-right"> Order Type:</label></td>
    <td colspan="5">
    <div class="input-group">
        <span class="input-group-addon"><i class="fa fa-cart-plus"></i></span>
        <select class="SelectCust" name="Type" id="Type">
        <option value="">Select Order Type</option>
        <option value="Cacao Beans">Cacao Beans</option>
        <option value="Bananas">Bananas</option>
        <option value="Coconuts">Coconuts</option>
        </select>
    </div>
    </td>
    </tr>
    <tr>
    <td><label class="arrow-right"> Order Sub-Type:</label></td>
    <td><label><input type="checkbox" value=""> Wet</label><input type="text" id="dist1" style="width:50px;" name="txtbox"> &nbsp;<label>Kg</label></td>
    <td><label><input type="checkbox" value=""> Dry</label><input type="text" id="dist2" style="width:50px;" name="txtbox"> &nbsp;<label>Kg</label></td>
    <td><label><input type="checkbox" value=""> Fermented</label><input type="text" id="dist3" style="width:50px;" name="txtbox"> &nbsp;<label>Kg</label></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td><label class="arrow-right"> Order Date:</label></td>
    <td>
    <div class='input-group date' class='datetimepicker8' style="padding-left:5px;padding-right:5px;">
         <input type='text' class="form-control" class="Frm_Date" />
         <span class="input-group-addon">
         <span class="glyphicon glyphicon-calendar"></span>
         </span>
    </div>
    </td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td colspan="5"><button id="Find" type="button" class="btn btn-success" style="margin-left:55px;">Add Order</button>
    </td>
    </tr>
    </table>
</form>

您应该使用属性

宽度

以像素为单位设置其尺寸

例如：

     table.table2 td
 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break:break-all;
  width: 20px;
 }

代码运行良好，只需删除重复的id即可。在重复id的位置使用类。您可以查看此链接以获得更好的帮助。在internet explorer中显示一些问题。

查看此链接了解相关IE问题

使用媒体屏幕css，如：

/*智能手机（纵向和横向）*/
@仅介质屏幕和（最小设备宽度：320px）和（最大设备宽度：480px）{
/*风格*/
}
/*智能手机（景观）----*/
@仅介质屏幕和（最小宽度：321px）{
/*风格*/
}
/*智能手机（肖像）*/
@仅介质屏幕和（最大宽度：320px）{
/*风格*/
}
/*iPad（纵向和横向）*/
@仅介质屏幕和（最小设备宽度：768px）和（最大设备宽度：1024px）{
/*风格*/
}
/*iPad（景观）----*/
@仅介质屏幕和（最小设备宽度：768px）和（最大设备宽度：1024px）和（方向：横向）{
/*风格*/
}
/*iPad（人像）----*/
@仅介质屏幕和（最小设备宽度：768px）和（最大设备宽度：1024px）和（方向：纵向）{
/*风格*/
}
/**********
iPad3
**********/
@仅介质屏幕和（最小设备宽度：768px）和（最大设备宽度：1024px）和（方向：横向）和（-webkit最小设备像素比：2）{
/*风格*/
}
@仅介质屏幕和（最小设备宽度：768px）和（最大设备宽度：1024px）和（方向：纵向）和（-webkit最小设备像素比：2）{
/*风格*/
}
/*台式机和笔记本电脑--------*/
@仅介质屏幕和（最小宽度：1224px）{
/*风格*/
}
/*大屏幕--------*/
@仅介质屏幕和（最小宽度：1824px）{
/*风格*/
}
/*iPhone4------*/
@仅介质屏幕和（最小设备宽度：320px）和（最大设备宽度：480px）和（方向：横向）和（-webkit最小设备像素比：2）{
/*风格*/
}
@仅介质屏幕和（最小设备宽度：320px）和（最大设备宽度：480px）和（方向：纵向）和（-webkit最小设备像素比：2）{
/*风格*/
}
/*iPhone5------*/
@仅介质屏幕和（最小设备宽度：320px）和（最大设备高度：568px）和（方向：横向）和（-webkit设备像素比：2）{
/*风格*/
}
@仅媒体屏幕和（最小设备宽度：320px）和（最大设备高度：568px）和（方向：纵向）和（-webkit设备像素比：2）{
/*风格*/
}
/*iPhone6------------*/
@仅介质屏幕和（最小设备宽度：375px）和（最大设备高度：667px）和（方向：横向）和（-webkit设备像素比：2）{
/*风格*/
}
@仅媒体屏幕和（最小设备宽度：375px）和（最大设备高度：667px）和（方向：纵向）和（-webkit设备像素比：2）{
/*风格*/
}
/*iPhone 6+------------*/
@仅媒体屏幕和（最小设备宽度：414px）和（最大设备高度：736px）和（方向：横向）和（-webkit设备像素比：2）{
/*风格*/
}
@仅媒体屏幕和（最小设备宽度：414px）和（最大设备高度：736px）和（方向：纵向）和（-webkit设备像素比：2）{
/*风格*/
}
/*三星Galaxy S3------*/
@仅媒体屏幕和（最小设备宽度：320px）和（最大设备高度：640px）和（方向：横向）和（-webkit设备像素比：2）{
/*风格*/
}
@仅媒体屏幕和（最小设备宽度：320px）和（最大设备高度：640px）和（方向：纵向）和（-webkit设备像素比：2）{
/*风格*/
}
/*三星Galaxy S4------*/
@仅媒体屏幕和（最小设备宽度：320px）和（最大设备高度：640px）和（方向：横向）和（-webkit设备像素比：3）{
/*风格*/
}
@仅介质屏幕和（最小设备宽度：320px）和（最大设备高度：640px）和（方向：纵向）和（-webkit设备像素比：3）{
/*风格*/
}
/*三星Galaxy S5------*/
@仅介质屏幕和（最小设备宽度：360px）和（最大设备高度：640px）和（方向：横向）和（-webkit设备像素比：3）{
/*风格*/
}
@仅介质屏幕和（最小设备宽度：360px）和（最大设备高度：640px）和（方向：纵向）和（-webkit设备像素比：3）{
/*风格*/
}

当我设置宽度时，它可以工作，但浏览器中的滚动条不在表格底部，我的意思是它超出了表格的范围。然后，col标签可能会帮助您：随时欢迎指向潜在解决方案的链接，但请让您的其他用户知道它是什么以及为什么会出现。始终引用重要链接中最相关的部分，以防无法访问目标站点或永久脱机。考虑到仅仅是一个指向外部站点的链接可能是

     table.table2 td
 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break:break-all;
  width: 20px;
 }