Question

我正在制作电子书并<figcaption>＆amp; {1}}在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;
}

enter image description here

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;
}

Answer 2

在CSS中使用'block'功能，而不是在html中使用'td'。

Answer 3

请勿使用表格并避免使用<html> <head> <style> div { float: right; width: 100px; height: 100px; background: red; transition: width 2s; transition-timing-function: linear; text-align: center; } div:hover { width: 300px; } body { width: 500px; border: solid black 1px; } </style> </head> <body> <div>sample</div> </body> </html>（http://www.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it/）

!important

.figure {
    border-spacing: 0;
    width: 100%;
    margin-left: "auto";
    margin-right: "auto";
    text-align: "center";
}

.figure .caption {
    padding-top: 7px;
    padding-bottom: 7px;
    padding-left: 10px;
    padding-right: 10px;
    border-right: 3px solid #262626;
    border-top: 1px solid #262626;
    border-bottom: 3px solid #262626;
    border-left: 1px solid #262626;
    font-family: "EB Garamond 08";
    text-align: center;
    font-size: 80% ;
    background-color: white;
    border-radius: 3px;
    width:"auto"; 
    margin-top:5px; /*Adjust this as desired*/
}

.figure img {
    padding-top: 7px;
    padding-bottom: 0;
    width:100%;
    display:block;
}

下面不需要的巨大空间

3 个答案: