Html 删除用d3创建的表中的列空间_Html_Css_D3.js_Whitespace_Css Tables

Html 删除用d3创建的表中的列空间

html css d3.js

Html 删除用d3创建的表中的列空间,html,css,d3.js,whitespace,css-tables,Html,Css,D3.js,Whitespace,Css Tables,我想删除d3表中的列空间。我需要删除下图中红线右侧的所有内容，并确保数据只适合div内部。它似乎比所需的额外空间更大。谢谢你的帮助下面概述了我使用的代码。请参阅下面的html和css代码 html 覆盖此规则：.table{width:100%；}类似于width:auto我编辑了问题的标题，并从标记列表中删除了标记，因为没有“D3表”这样的东西。这只是一个HTML表，它是用D3创建的，这一事实对答案不重要。但是，如果D3代码与这里的问题有关，您可以编辑您的问题，再次添加标签，但也请共享D3

我想删除d3表中的列空间。我需要删除下图中红线右侧的所有内容，并确保数据只适合div内部。它似乎比所需的额外空间更大。谢谢你的帮助

下面概述了我使用的代码。请参阅下面的html和css代码

html

覆盖此规则：

.table{width:100%；}

类似于

width:auto

我编辑了问题的标题，并从标记列表中删除了标记，因为没有“D3表”这样的东西。这只是一个HTML表，它是用D3创建的，这一事实对答案不重要。但是，如果D3代码与这里的问题有关，您可以编辑您的问题，再次添加标签，但也请共享D3代码。好的，公平点，但是该表是使用D3.js创建的，因此如果可能的话，我希望包含标签，以查看其他人是否有同样的问题。我将尝试隔离创建表的d3代码并共享它。感谢样式

。table

引用

div

，默认情况下

div

始终为100%，如何设置

div

的

边框折叠

，它将被

table

标记的浏览器默认样式覆盖。在我的Chrome浏览器中，表格是最小的，没有

边框折叠

，我必须将类

表格

应用于表格吗？？不幸的是，只显示一个填充的HTML（带有伪数据）-这只是本文中的第一个图像[Hi，你的意思是用

替换.table{width:100%；}
为.table{width:auto；}，因为这对我也不起作用吗？谢谢
<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>

  <body>
    <div class="grid-container">
      <div class="map">
        <svg></svg>
      </div>
      <div class="box-plot">
        <svg></svg>
      </div>
      <div class="table"></div>
      <div class="line-chart">
        <svg></svg>
      </div>
    </div>

    <script src="bundle.js"></script>
  </body>
</html>

.map {
  grid-area: map;
}

.map-path {
  /* fill: rgba(0,0,0,0.01); */
  /* stroke: rgba(0,0,0,0.2); */
  /* stroke-width: 1px; */
}

.map-path.counties {
  stroke: black;
  stroke-width: 1px;
}

.map-path.catchments {
  stroke: black;
  stroke-width: 1px;
}

.map-path.aquifer {
  /* stroke: rgba(0,200,0,0.5); */
  /* stroke-width: 0.5px; */
}

.map-path.gwrockunit {
  /* stroke: rgba(200,0,0,0.5); */
  /* stroke-width: 0.5px; */
}

.map-path.selected-basemap-polygon {
  stroke: black;
  stroke-width: 2px;
}

.box-plot {
  grid-area: box-plot;
}

.table {
  grid-area: table;
  overflow-y: scroll;
  font-family: Courier;
  /* max-width: 400px; */
  border-collapse: collapse;
  white-space: nowrap;
  width: 100%;
}
tr:nth-of-type(odd) {
        background: #eee;
}
th {
    background: #333;
    color: white;
    font-weight: bold;
    cursor: s-resize;
    background-repeat: no-repeat;
      background-position: 3% center;
}
td, th {
  padding: 6px;
  border: 1px solid #ccc;
  text-align: left;
}

.line-chart {
  grid-area: line-chart;
}

.grid-container {
  position: fixed;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  display: grid;
  grid-template-areas:
    'map map box-plot table'
    'map map line-chart table';
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container div {
  background-color: white;
}

.grid-container div svg {

  /* This makes it so the grid does not resize when the SVG is added */
  position: absolute;
}

.basemap-selector-widget {
  cursor: pointer;
}

.basemap-selector-widget rect {
  fill: white;
  stroke: black;
  stroke-width: 2px;
  border-radius: 25px;
}

.basemap-selector-widget text {
  font-family: sans;
  alignment-baseline: middle;
  text-anchor: middle;
}