表格不適合在屏幕上

我遇到了問題，我的CSS並不能解決它。我不會在頁面上修復表格。表格不適合在屏幕上

這被認爲在：https://shiftscloud.herokuapp.com/newrosters.php

似乎無法發現問題。

我的CSS：

.manreq {border-collapse:collapse;border-spacing:0;background-color:#a0d4a4} 
.manreq td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;} 
.manreq th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;} 
.manreq .tg-zd20{font-size:22px;text-align:center} 
.manreq .tg-wrg0{font-size:22px;text-align:center;vertical-align:top} 
.manreq .tg-wv9z{font-size:22px;text-align:center} 
.manreq .tg-qcjy{font-size:22px;vertical-align:top} 
.manreq .tg-yw4l{vertical-align:top;width:20px} 



.roster {border-collapse:collapse;border-spacing:0;background-color:#33FF66;padding:5px;} 
.roster td{font-family:Arial, sans-serif;font-size:14px;padding:5px 10px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;} 
.roster th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:5px 10px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;} 
.roster .tg-baqh{text-align:center;vertical-align:top} 
.roster .tg-jlrw{font-size:16px;text-align:center} 
.roster .tg-yw4l{vertical-align:top;width:20px} 
@media screen and (max-width: 767px) {.tg {width: auto !important;}.tg col {width: auto !important;}.tg-wrap {overflow-x: auto;-webkit-overflow-scrolling: touch;}}

來源

2016-05-16 kelliehughesspare

你的表包含了諸如輸入 - 字段嵌套元素（被設定爲75％）。現在，如果你想讓所有東西都適合1140px的Parent容器，那麼你必須妥協輸入字段的大小，我不認爲這就是你想要的。所以，更好的做法是通過將CSS樣式添加到CSS中來實現Container Scrollable（水平）：*** div.tg-wrap {0} {0} {0} {0}溢出：自動; } *** – Poiz

@Poiz我不介意讓我的輸入字段更小，如果它意味着它們都適合，但我該如何做呢？ – kelliehughesspare

如果您需要靈活寬度的完整解決方案;您可以查看本教程：https：//datatables.net/examples/basic_init/flexible_width.html – Poiz

嘗試添加這種風格你的CSS文件：

div.tg-wrap { 
    overflow: auto; 
}

至少你可以水平滾動之後...如果你想與靈活的寬度強大的解決方案;你可以看看這個教程：https://datatables.net/examples/basic_init/flexible_width.html

來源

2016-05-16 00:31:39 Poiz

嘗試增加表格的佈局：固定你的.roster類：

.roster { 
    table-layout: fixed; 
    width: 100%; 
}

這應該表格減少你的窗口的限制之內，但你的字段可能不由於字體大小相當大，因此可以100％可讀。您可能需要縮小字體大小。

此外，您可以更新.rosterform類爲100％，如果你想充分利用空的空間：

.rosterform { 
    width: 100%; 
}

來源

2016-05-16 02:24:55

表格不適合在屏幕上

回答

相關問題