如何使TD固定表與不同的屏幕尺寸

我有一個包含table具有6個columnsform，我想使固定用不同的屏幕尺寸（筆記本電腦，ipad公司，電話，...等等）table的td，只是滾動條以不同的大小添加。如何使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; 
}

來源

2016-12-28 New at Leaflet

你應該使用屬性width設置其尺寸以像素爲單位。

例如：

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

來源

2016-12-28 10:55:16

它工作時，我設置的寬度，但滾動條在瀏覽器似乎沒有在底部的表，我的意思是它不在表單中。 –

然後** col **標籤可以幫助您： http://www.w3schools.com/tags/tag_col.asp –

-1

代碼工作正常，只是你需要在地方重複ID的去除id.use類的重複。 click here你可以看到這個鏈接更好的幫助。在Internet Explorer中的顯示出一些問題。看到這個鏈接，相關的IE問題here relative link

來源

2016-12-28 11:25:32

一個潛在的解決方案的鏈接總是受歡迎的，但請[在鏈接周圍添加上下文]（ http://meta.stackoverflow.com/a/8259/169503），所以你的同行用戶會有一些想法是什麼，爲什麼它在那裏。如果目標網站無法訪問或永久離線，請始終引用重要鏈接中最相關的部分。考慮到僅僅是一個外部網站的鏈接是一個可能的原因[爲什麼和如何刪除一些答案？]（http://stackoverflow.com/help/deleted-answers） –

使用媒體屏幕的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 */ 
 
}

來源

2016-12-29 07:51:35 illeas

如何使TD固定表與不同的屏幕尺寸

回答

相關問題