<table id="entryDetail"> <thead > <tr> <th>操作</th> <th>提单号/运单号</th> <th>一程日期</th> <th>二程日期</th> <th>预计到货日期</th> <th>海船公司</th> <th>放箱日期</th> <th>放箱单上传</th> </tr> <tr> <td><input type="button" name="comment" onclick="deleteTableRow(button)" value="删除"></td> <td><input type="text" name="comment"></td> <td><input type="date" name="date1"></td> <td><input type="date" name="date2"></td> <td><input type="date" name="date3"></td> <td><input type="text" name="commen1t"></td> <td><input type="date" name="date4"></td> <td><input type="file" name="attachment"></td> </tr> </thead> </table>添加表格样式

你可以在CSS文件中添加以下样式代码来为这个表格添加样式：

#entryDetail {
  border-collapse: collapse;
  width: 100%;
}

#entryDetail th, #entryDetail td {
  border: 1px solid black;
  padding: 8px;
  text-align: left;
}

#entryDetail th {
  background-color: #f2f2f2;
  color: #333;
}

#entryDetail tr:hover {
  background-color: #f5f5f5;
}

#entryDetail input[type="text"], #entryDetail input[type="date"], #entryDetail input[type="file"] {
  width: 100%;
  border: none;
  padding: 0;
  margin: 0;
}

这段代码会使表格的边框变成黑色实线，表头背景变成浅灰色，鼠标悬停时行的背景变成浅灰色，输入框和文件上传框宽度变成100%。你可以根据需要进行调整。

相关问题

<table id="entryDetail"> <thead > <tr> <th>操作</th> <th>提单号/运单号</th> <th>一程日期</th> <th>二程日期</th> <th>预计到货日期</th> <th>海船公司</th> <th>放箱日期</th> <th>放箱单上传</th> </tr> <tr> <td><input type="button" name="comment" onclick="deleteTableRow(this)" value="删除"></td> <td><input type="text" name="comment"></td> <td><input type="date" name="date1"></td> <td><input type="date" name="date2"></td> <td><input type="date" name="date3"></td> <td><input type="text" name="commen1t"></td> <td><input type="date" name="date4"></td> <td><input type="file" name="attachment"></td> </tr> </thead> </table>宽度铺满滚动和选中删除

您可以使用以下代码来实现您的要求：

<style>
    #entryDetail {
        width: 100%;
        table-layout: fixed;
    }
    th, td {
        padding: 10px;
        text-align: center;
    }
    th:first-child, td:first-child {
        width: 10%;
    }
    th:nth-child(2), td:nth-child(2) {
        width: 15%;
    }
    th:nth-child(3), td:nth-child(3), th:nth-child(4), td:nth-child(4), th:nth-child(5), td:nth-child(5) {
        width: 12%;
    }
    th:nth-child(6), td:nth-child(6) {
        width: 20%;
    }
    th:last-child, td:last-child {
        width: 16%;
    }
    tbody tr:hover {
        background-color: #f5f5f5;
    }
</style>

<script>
    function deleteTableRow(btn) {
        var row = btn.parentNode.parentNode;
        row.parentNode.removeChild(row);
    }
</script>

<table id="entryDetail">
    <thead>
        <tr>
            <th>操作</th>
            <th>提单号/运单号</th>
            <th>一程日期</th>
            <th>二程日期</th>
            <th>预计到货日期</th>
            <th>海船公司</th>
            <th>放箱日期</th>
            <th>放箱单上传</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="button" name="comment" onclick="deleteTableRow(this)" value="删除"></td>
            <td><input type="text" name="comment"></td>
            <td><input type="date" name="date1"></td>
            <td><input type="date" name="date2"></td>
            <td><input type="date" name="date3"></td>
            <td><input type="text" name="comment1"></td>
            <td><input type="date" name="date4"></td>
            <td><input type="file" name="attachment"></td>
        </tr>
    </tbody>
</table>

此代码将表格的宽度设置为100%，并使其表格布局固定。它还将表头和单元格的填充和文本对齐方式设置为居中。每个表头和单元格都有一个宽度百分比，以便在表格宽度变化时自适应。还添加了一个鼠标悬停样式以提高用户体验。在代码的底部，有一个JavaScript函数deleteTableRow(btn)，它将从表格中删除所在行。

<div class="table-container"><table id="my-table"><thead><tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr></thead><tbody><tr><td>Fixed</td><td>Data 1</td><td>Data 2</td></tr><tr><td>Fixed</td><td>Data 3</td><td>Data 4</td></tr></tbody></table><table><thead><tr><th>Header 1</th></tr></thead><tbody><tr><td>Fixed</td></tr><tr><td>Fixed</td></tr></tbody></table></div> 实现拖动父级滚动条超出100像素固定第一列实例

可以通过以下方式实现拖动父级滚动条超出100像素固定第一列：

1. 首先将第一列的单元格设置为固定宽度，并将其设置为相对定位。

2. 使用 JavaScript 监听父级容器的滚动事件，并根据滚动距离调整第一列单元格的左间距。

3. 当滚动距离超过100像素时，将第一列单元格的左间距设置为0，使其固定在表格中。

下面是一些示例代码，可以根据实际情况进行修改：

HTML 代码：

<div class="table-container">
  <table id="my-table">
    <thead>
      <tr>
        <th class="fixed-column">Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="fixed-column">Fixed</td>
        <td>Data 1</td>
        <td>Data 2</td>
      </tr>
      <tr>
        <td class="fixed-column">Fixed</td>
        <td>Data 3</td>
        <td>Data 4</td>
      </tr>
    </tbody>
  </table>
</div>

CSS 代码：

.table-container {
  overflow-x: auto;
  max-width: 100%;
}

#my-table {
  border-collapse: collapse;
  width: 100%;
}

#my-table th,
#my-table td {
  padding: 10px;
  text-align: left;
  border: 1px solid #ccc;
}

.fixed-column {
  position: relative;
  width: 100px;
  left: 0;
  z-index: 1;
}

JavaScript 代码：

var table = document.getElementById("my-table");
var firstColumn = table.getElementsByClassName("fixed-column")[0];

table.parentElement.addEventListener("scroll", function () {
  var scrollLeft = this.scrollLeft;

  if (scrollLeft > 100) {
    firstColumn.style.left = "0";
  } else {
    firstColumn.style.left = scrollLeft + "px";
  }
});

这种方法可以在父容器滚动时固定第一列，但是可能会出现一些问题，例如在固定列时表格宽度可能会变窄，因此您需要根据实际情况进行调整。