表格不适合在屏幕上

问题描述：

我遇到了问题，我的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;}}

你的表包含了诸如输入 - 字段嵌套元素（被设定为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

答

尝试增加表格的布局：固定你的.roster类：

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

这应该表格减少你的窗口的限制之内，但你的字段可能不由于字体大小相当大，因此可以100％可读。您可能需要缩小字体大小。

此外，您可以更新.rosterform类为100％，如果你想充分利用空的空间：

.rosterform { 
    width: 100%; 
}

表格不适合在屏幕上

相关推荐