logo标签列表

如何在不同屏幕尺寸下使表格中的td固定

htmlcsstwitter-bootstrap-3
3

我有一个包含6个列的表格table，希望能够在不同屏幕尺寸（笔记本电脑、iPad、手机等）下固定table的td，只添加不同尺寸的滚动条即可。

<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>

以及CSS代码

 table.table2
 {
  table-layout: fixed;
  width: 100%;
  white-space: nowrap; 
 }
 table.table2 td
 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break:break-all;
 }

enter image description here

3个回答
0
使用媒体查询CSS，例如： 

/* Smartphones (portrait and landscape) ----------- */

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */

@media only screen and (min-width : 321px) {
/* Styles */
}



/* Smartphones (portrait) ----------- */

@media only screen and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}

/**********
iPad 3
**********/

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

/* Desktops and laptops ----------- */

@media only screen  and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen  and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

/* iPhone 5 ----------- */

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6 ----------- */

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6+ ----------- */

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S3 ----------- */

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* Samsung Galaxy S5 ----------- */

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

0

你应该使用属性width以像素为单位设置其尺寸。

例如：

     table.table2 td
 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break:break-all;
  width: 20px;
 }
当我设置宽度时，它可以工作，但滚动条出现在浏览器中而不是表格底部，我的意思是它超出了表单。 - New at Leaflet
那么 col 标签可能会对你有所帮助：http://www.w3schools.com/tags/tag_col.asp - Igino Boffa
-1

代码运行良好，只需要删除 ID 的重复出现，并使用 class 替代重复的 ID。 点击这里 您可以查看此链接以获得更好的帮助。 在 Internet Explorer 中存在一些问题。 请查看此链接以了解相关的 IE 问题 这里的相对链接

欢迎提供潜在解决方案的链接，但请在链接周围添加上下文，以便其他用户了解它是什么以及为什么存在。如果目标网站无法访问或永久离线，请始终引用重要链接的最相关部分。请注意，仅仅是一个指向外部网站的链接可能是为什么会删除某些答案？的一个可能原因。 - Rohan Khude
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接