Question

我的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;}}

Answer 1

尝试将此样式添加到CSS文件中：

div.tg-wrap {
    overflow: auto;
}

至少你可以在之后水平滚动...如果你想要一个灵活宽度的强大解决方案;你可以查看这个教程：https://datatables.net/examples/basic_init/flexible_width.html

Answer 2

尝试添加table-layout：已修复到.roster类：

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

这应该会将您的表格缩小到窗口的限制范围内，但由于字体大小非常大，因此您的字段可能不是100％可读。您可能需要减小字体大小。

此外，如果您希望充分利用空白区域，可以将.rosterform类更新为100％：

.rosterform {
    width: 100%;
}

表不适合屏幕

2 个答案: