无论如何我都不是Web开发人员，但是我正在为我的应用程序设计一个简单的前端。该应用程序的目的是显示一些数据，并接收评论/批准状态（这两个功能将在以后实现）。
我的问题：
由于某种原因，在IE（我可以使用的唯一浏览器上，并且我的用户将使用的浏览器）上，表格样式不适用于该类的所有实例。当我在IE和Edge中对此进行测试时，表具有不同的样式，这会影响可读性。从我的Python代码中的当前数据来看，总共将有177个变量来描述67对（序列号，LTT名称）之间。
我已经通过验证程序运行了此程序，没有收到任何错误。 https://validator.w3.org/nu/
根据我阅读的有关CSS和类选择器的文档，我认为没有理由不起作用。事实证明，这项任务比原本应该令人沮丧的多。
下面是我的PC上的CSS和HTML：
.outerContainer {
width: 80%;
padding-left: 5%;
border-width: 2px;
border-color: black;
}
.detailData {
border-style: inset;
border-width: 4px;
border-color: blue;
/*cell-padding: 5px;
*/
}
.datahead {
border-bottom-style: inset;
border-bottom-color: blue;
border-bottom-width: 2px;
}<!DOCTYPE html>
<!--
This page is meant to be a place to test out layouts for when I actually have the tools to make my Python code
web-capable. Everything on here will be static example data, based on what I've seen in the output from my code.
-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test Display Page</title>
<!--
<link rel="stylesheet" type="text/css" href="U:\work\svn\change_analysis\web_stuff\testpage.css">
-->
<link rel="stylesheet" type="text/css" href="testpage.css">
<!--<style>-->
<!--table.detailData{-->
<!--border-collapse: collapse;-->
<!--tr {-->
<!--padding: 2px;-->
<!--text-align: center;-->
<!--}-->
<!--}-->
<!--</style>-->
</head>
<body>
tyudfyudrtu sdfgdfsg
<script>
/*
* This TINY script manages the show/hide functionality per (sn, ltt name) entry on the page.
* I intend to keep any and all JS on this page neat and TINY.
*/
function showHide(index) {
//index should be an integer or string
//Based on index, we should be able to find the clicked button and desired table to show/hide
var source = document.getElementById("sh-" + index)
var target = document.getElementById("index-" + index)
if (target.style.display === "none") {
target.style.display = "block";
//source.textContent = "Hide";
source.textContent = "v";
} else {
target.style.display = "none";
//source.textContent = "Show";
source.textContent = ">";
}
}
</script>
<p>Serial Number, Table Name</p>
<div class="outerContainer">
<!--
Outer container for grouping
-->
<span>
A3231E0020
</span>
<br/>
<span>
ST038IA0-O2B0-30-2:TC44-DK-10000-0-99999-12-1.0038-1-100-1-400-200
</span>
<br/>
<button onclick="showHide(0)" id="sh-0"> > </button>
<br/>
<div id="index-0" style="display: none;">
<table class="detailData">
<!--
This table is for testing out layout of data for a single table modified by a single serial number.
-->
<thead class="datahead">
<tr>
<td>Variable Name</td>
<td>Current Value</td>
<td>Default Value</td>
<td>Directional Threshold, units</td>
<td>Change Date</td>
<td>Number of cuts since change</td>
<td>Contour Cut Since Change</td>
</tr>
</thead>
<tr>
<td>
<!--
These fields would be filled by a template engine in the later and final versions
-->
Large Focus
</td>
<td>
-2.5
</td>
<td>
-1.5
</td>
<td>
1 digits
</td>
<td>
2018-04-07 13:12:02
</td>
<td>
20
</td>
<td>
565.86 meters
</td>
</tr>
<tr>
<td>
<!--
These fields would be filled by a template engine in the later and final versions
-->
Small Reduced Power
</td>
<td>
500
</td>
<td>
600
</td>
<td>
10 percent
</td>
<td>
2018-04-25 09:47:32
</td>
<td>
4
</td>
<td>
373.88 meters
</td>
</tr>
</table>
</div>
<br/>
</div>
<div class="outerContainer">
<div class="headerTbl">
<span>A0000E1111</span>
<br/>
<span>CU100IA0-N2B0-30-2</span>
</div>
<button onclick="showHide(1)" id="sh-1"> > </button>
<br/>
<div id="index-1" style="display: none;">
<table class="detailData">
<!--
This table is for testing out layout of data for a single table modified by a single serial number.
-->
<thead>
<tr class=datahead>
<td>Variable Name</td>
<td>Current Value</td>
<td>Default Value</td>
<td>Directional Threshold, units</td>
<td>Change Date</td>
<td>Number of cuts since change</td>
<td>Contour Cut Since Change</td>
</tr>
</thead>
<tr>
<td>
<!--
These fields would be filled by a template engine in the later and final versions
-->
Large Focus
</td>
<td>
-2.5
</td>
<td>
-1.5
</td>
<td>
1 digits
</td>
<td>
2018-04-07 13:12:02
</td>
<td>
20
</td>
<td>
565.86 meters
</td>
</tr>
<tr>
<td>
<!--
These fields would be filled by a template engine in the later and final versions
-->
Small Reduced Power
</td>
<td>
500
</td>
<td>
600
</td>
<td>
10 percent
</td>
<td>
2018-04-25 09:47:32
</td>
<td>
4
</td>
<td>
373.88 meters
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
（谢谢你）
答案 0 :(得分：1)
.outerContainer {
width: 80%;
padding-left: 5%;
border-width: 2px;
border-color: black;
}
.detailData {
border-style: inset;
border-width: 4px;
border-color: blue;
border-collapse: collapse;
}
.datahead{
border-bottom-style: inset;
border-bottom-color: blue;
border-bottom-width: 2px;
color: green;
}<!DOCTYPE html>
<!--
This page is meant to be a place to test out layouts for when I actually have the tools to make my Python code
web-capable. Everything on here will be static example data, based on what I've seen in the output from my code.
-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test Display Page</title>
<!--
<link rel="stylesheet" type="text/css" href="U:\work\svn\change_analysis\web_stuff\testpage.css">
-->
<!--<style>-->
<!--table.detailData{-->
<!--border-collapse: collapse;-->
<!--tr {-->
<!--padding: 2px;-->
<!--text-align: center;-->
<!--}-->
<!--}-->
<!--</style>-->
</head>
<body>
tyudfyudrtu sdfgdfsg
<script>
/*
* This TINY script manages the show/hide functionality per (sn, ltt name) entry on the page.
* I intend to keep any and all JS on this page neat and TINY.
*/
function showHide(index) {
//index should be an integer or string
//Based on index, we should be able to find the clicked button and desired table to show/hide
var source = document.getElementById("sh-" + index)
var target = document.getElementById("index-" + index)
if (target.style.display === "none") {
target.style.display = "block";
//source.textContent = "Hide";
source.textContent = "v";
} else {
target.style.display = "none";
//source.textContent = "Show";
source.textContent = ">";
}
}
</script>
<p>Serial Number, Table Name</p>
<div class="outerContainer">
<!--
Outer container for grouping
-->
<span>
A3231E0020
</span>
<br/>
<span>
ST038IA0-O2B0-30-2:TC44-DK-10000-0-99999-12-1.0038-1-100-1-400-200
</span>
<br/>
<button onclick="showHide(0)" id="sh-0"> > </button>
<br/>
<div id="index-0" style="display: none;">
<table class="detailData" rules = "groups" >
<!--
This table is for testing out layout of data for a single table modified by a single serial number.
-->
<thead>
<tr class = "datahead">
<th>Variable Name</th>
<th>Current Value</th>
<th>Default Value</th>
<th>Directional Threshold, units</th>
<th>Change Date</th>
<th>Number of cuts since change</th>
<th>Contour Cut Since Change</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<!--
These fields would be filled by a template engine in the later and final versions
-->
Large Focus
</td>
<td>
-2.5
</td>
<td>
-1.5
</td>
<td>
1 digits
</td>
<td>
2018-04-07 13:12:02
</td>
<td>
20
</td>
<td>
565.86 meters
</td>
</tr>
<tr>
<td>
<!--
These fields would be filled by a template engine in the later and final versions
-->
Small Reduced Power
</td>
<td>
500
</td>
<td>
600
</td>
<td>
10 percent
</td>
<td>
2018-04-25 09:47:32
</td>
<td>
4
</td>
<td>
373.88 meters
</td>
</tr>
</tbody>
</table>
</div>
<br/>
</div>
<div class="outerContainer">
<div class="headerTbl">
<span>A0000E1111</span>
<br/>
<span>CU100IA0-N2B0-30-2</span>
</div>
<button onclick="showHide(1)" id="sh-1"> > </button>
<br/>
<div id="index-1" style="display: none;">
<table class="detailData">
<!--
This table is for testing out layout of data for a single table modified by a single serial number.
-->
<thead>
<tr class=datahead>
<td>Variable Name</td>
<td>Current Value</td>
<td>Default Value</td>
<td>Directional Threshold, units</td>
<td>Change Date</td>
<td>Number of cuts since change</td>
<td>Contour Cut Since Change</td>
</tr>
</thead>
<tr>
<td>
<!--
These fields would be filled by a template engine in the later and final versions
-->
Large Focus
</td>
<td>
-2.5
</td>
<td>
-1.5
</td>
<td>
1 digits
</td>
<td>
2018-04-07 13:12:02
</td>
<td>
20
</td>
<td>
565.86 meters
</td>
</tr>
<tr>
<td>
<!--
These fields would be filled by a template engine in the later and final versions
-->
Small Reduced Power
</td>
<td>
500
</td>
<td>
600
</td>
<td>
10 percent
</td>
<td>
2018-04-25 09:47:32
</td>
<td>
4
</td>
<td>
373.88 meters
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
好的，这里有一些更改：
.detailData样式的边框。据我所知，表格一次只能具有1个边框样式，并且由于表格上有两种同时定义边框的样式，因此第一个会接管。<td>标签更改为<th>标签，因为这些标签用于标头。个人喜好，但我认为它看起来更好。 重要的是边界崩溃。