html - <td> 下面不需要的巨大空间

Question

我正在制作电子书和 <figure> & <figcaption>在 Sigil 中被渲染为未知标签，所以我使用了 <table>用于图像和标题，但它留下了巨大的差距，如下图所示。

HTML

<table class="imgtable" style="border: 1px solid black;">
<tr>
  <td class="imgs" style="border: 1px solid black;"><img alt="2b - 69" src="../Images/2b_-_69.jpg" width="100%" /></td>
</tr>

<tr>
  <td class="caption">A 1795 photograph of some stalwarts under the famous banyan tree “…all sentiment…” and a mute witness to the growth of cricket in Calcutta.</td>
</tr>

CSS

    table.imgtable {
  width: 100% !important;
  margin-left: "auto" !important;
  margin-right: "auto" !important;
  text-align: "center" !important;
}
table.imgtable td.caption {
  padding-top: 7px !important;
  padding-bottom: 7px !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
  border-right: 3px solid #262626 !important;
  border-top: 1px solid #262626 !important;
  border-bottom: 3px solid #262626 !important;
  border-left: 1px solid #262626 !important;
  font-family: "EB Garamond 08" !important;
  text-align: center !important;
  font-size: 80% !important;
  background-color: white !important;
  border-radius: 3px !important;
  width:"auto" !important;  
}
table.imgtable td.imgs {
  padding-top: 7px !important;
  padding-bottom: 0 !important;
  width:100%;
}
img {
  width: "auto" !important;
}

Answer 1

使用border-spacing , 将其设置为 0 用于表。

这里是 JSFiddle .

HTML

<table class="imgtable" style="border: 1px solid black;">
<tbody>
    <tr>
      <td class="imgs" style="border: 1px solid black;">
          <img alt="2b - 69" src="../Images/2b_-_69.jpg" width="100%" />
        </td>
    </tr>
    <tr>
      <td class="caption">A 1795 photograph of some stalwarts under the famous banyan tree “…all sentiment…” and a mute witness to the growth of cricket in Calcutta.</td>
    </tr
</table>

CSS

table.imgtable {
    border-spacing: 0;
    width: 100% !important;
    margin-left: "auto" !important;
    margin-right: "auto" !important;
    text-align: "center" !important;
}

table.imgtable td.caption {
    padding-top: 7px !important;
    padding-bottom: 7px !important;
    padding-left: 1opx !important;
    padding-right: 10px !important;
    border-right: 3px solid #262626 !important;
    border-top: 1px solid #262626 !important;
    border-bottom: 3px solid #262626 !important;
    border-left: 1px solid #262626 !important;
    font-family: "EB Garamond 08" !important;
    text-align: center !important;
    font-size: 80% !important;
    background-color: white !important;
    border-radius: 3px !important;
    width:"auto" !important;  
}

table.imgtable td.imgs {
    padding-top: 7px !important;
    padding-bottom: 0 !important;
    width:100%;
}

img {
    width: "auto" !important;
}