React Bootstrap Table - 尝试用相等的列宽填充页面答案

【问题标题】：React Bootstrap Table - Trying To Fill Page With Equal Column WidthReact Bootstrap Table - 尝试用相等的列宽填充页面
【发布时间】：2020-08-28 13:36:07
【问题描述】：

样式或 CSS 不是最好的...试图让 React Bootstrap 表以相等的列宽填充页面，使用了宽度为 200% 的样式化 div，但它似乎不正确（参见图片）。

最终，我可能希望将单独的组件放入<td>，但那是以后的事情了。不太确定如何在此处设置表格样式...

import React from "react";
import styled from "styled-components";
import { Table } from "react-bootstrap";

const GridWrapper = styled.div`
  display: grid;
  grid-gap: 10px;
  margin-top: 4.5em;
  margin-left: 6em;
  margin-right: 6em;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(25px, auto);
`;

const TableWrapper = styled.div`
  width: 200%;
`;

export const Reports = props => (
  <GridWrapper>
    <div>
      <TableWrapper>
        <ReportsTable />
      </TableWrapper>
    </div>
  </GridWrapper>
);

function ReportsTable() {
  return (
    <Table striped bordered hover size="sm" hover>
      <table>
        <tr>
          <th>Sim Id</th>
          <th>Run Date</th>
          <th>Run By</th>
          <th>Duration</th>
          <th>Sim Title</th>
          <th>Sim Count</th>
          <th>Sim End Date</th>
          <th>Status</th>
          <th>Info</th>
          <th>JSON</th>
          <th>Report</th>
        </tr>
        <tr>
          <td>A</td>
          <td>col A</td>
          <td>col A</td>
          <td>col A</td>
          <td>col A</td>
          <td>col A</td>
          <td>col A</td>
          <td>col A</td>
          <td>col A</td>
          <td>col A</td>
          <td>col A</td>
        </tr>
      </table>
    </Table>
  );
}

【问题讨论】：

标签： javascript html css reactjs react-bootstrap

【解决方案1】：

要生成每个单元格宽度相同的 Bootstrap 全角表格，您可以：

将table-fixed 类添加到表中，
使用百分比宽度设置表格的th 元素的样式。

例子：

/* all columns set to 9% total width */
tr.same-col-widths th {
  width: 9%;
}

<div class="container-fluid">
  <h5>Full-width table with same-width columns</h5>
  <table class="table table-fixed table-striped table-bordered
                table-sm same-col-widths">
    <thead>
      <tr class="same-col-widths">
        <th>th</th> <th>A</th> <th>B</th> <th>C</th> <th>D</th>
        <th>E</th> <th>F</th> <th>G</th> <th>H</th> <th>I</th>
        <th>J</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>td</td> <td>col A</td> <td>col B</td> <td>col C</td>
        <td>col D</td> <td>col E</td> <td>col F</td> <td>col G</td>
        <td>col H</td> <td>col I</td> <td>col J</td>
      </tr>
    </tbody>
  </table>
</div>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />

【讨论】：