Question

当你在375px观看时，在td旁边有这个奇怪的差距。哪一部分会导致这种情况，我该如何摆脱它呢？

该表位于容器类为btw的div内。 table和tr都继承100％的宽度（在该像素处查看时为375.2px），但由于某种原因，td仅继承370.4 - 缺少4.8px。

HTML：

<div className="container container--margin--top container--font">
  <table className="header__table--margin--btm">
    <thead>
      <tr>
        <th className="text article__title">Article Title</th>
        <th className="text snippet">Snippet (click to view article)</th>
      </tr>
    </thead>
  </table>
  <ArticleRow dataArray={dataArray} />
</div>

JS：

const ArticleRow = ({dataArray}) => {
  const dataRow = dataArray.map(row => {
    return (
      <tr key={row.title}>
        <td className="title">{row.title}</td>
        <td className="content__div">
          <a href={row.link} className="content">{row.content}</a>
        </td>
      </tr>
    );
  });

  return (
    <table>
      <tbody>
        {dataRow}
      </tbody>
    </table>
  );
}

CSS：

table {
  border-collapse: separate;
  border-spacing: 2px;
  border-color: grey;

  .title {
    background: $title-bg;
    color: $content-bg;
    text-align: right;
    width: 15.4rem;
    padding-right: 1rem;
    font: 500 2.1rem "Garamond", serif;
    border: 1px solid rgba(39, 41, 50, 0.1);
  }

  .content__div {
    //border: 1px solid rgba(250, 250, 250, 0.1);
  }

  .content {
    display: block;
    background: $content-bg;
    color: $title-bg;
    text-decoration: none;
    padding: 1rem 1.5rem;

    :hover {
      text-decoration: none;
      color: $title-bg;
      opacity: 0.9;
    }
  }
}

@media (max-width: 550px) {
  table .title {
    padding-left: 0.4rem;
    padding-right: 0.4rem;
    width: auto;
  }

  .container {
    padding: 0;
  }

  .container--margin--top {
    margin-top: 1.5rem;
  }

  .article__title {
    width: 9.8rem;
    padding-right: 0.4rem;
    text-align: inherit;
  }

  .search__bar {
    width: 20rem;
  }
}

@media (max-width: 376px) {
  .title {
    position: absolute;
    margin-top: -2.8rem;
    margin-left: 2px;
  }

  .container--margin--top {
    margin-top: 1rem;
  }

  .header__table--margin--btm {
    margin-bottom: 2.9rem;
  }

  tbody tr:not(:last-child) .content__div {
    padding-bottom: 4rem;
  }
}

https://github.com/helplah/react-wikipedia

Answer 1

我找到了答案。缺少的4px源自border-collapse: separate。一旦我解开它，差距就消失了。我在firefox和chrome上测试过它，它适用于两种浏览器。

div容器中的表格有奇怪的差距

1 个答案: