6/11/24, 6:40 PM html - Unwanted Huge Space below <td> - Stack Overflow

2024 Developer survey is here and we would like to hear from you! Take the 2024 Developer Survey

Unwanted Huge Space below <td>

Asked 9 years, 1 month ago Modified 9 years ago Viewed 2k times

I'm making an e-book and <figure> & <figcaption> are being rendered as unknown tag in
Sigil, so I used <table> for image and caption but it leaves a huge gap like in the picture below.
1
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 {
https://stackoverflow.com/questions/30159797/unwanted-huge-space-below-td?noredirect=1&lq=1 1/5
6/11/24, 6:40 PM html - Unwanted Huge Space below <td> - Stack Overflow
width: "auto" !important;
}

html css epub

Share Improve this question Follow edited May 26, 2015 at 14:28 asked May 11, 2015 at 4:42
Cylian user2539745
11.1k 4 43 56 1,025 2 16 24

1 Assuming that image doesn't have extra space at the bottom of it, since you're using tables instead of divs,
try adding a height modifier to snap the height up, like <table height="0px" .../> and put the same into the

https://stackoverflow.com/questions/30159797/unwanted-huge-space-below-td?noredirect=1&lq=1 2/5
6/11/24, 6:40 PM html - Unwanted Huge Space below <td> - Stack Overflow
<tr> tag. ...alternately you can add height:0px; into your style tag. – joshstrike May 11, 2015 at 4:48

Can you post your link or create fiddle for better understanding your issue? – ketan May 11, 2015 at 4:57

3 Answers Sorted by: Highest score (default)

Use border-spacing, set it to 0 for table.

Here is JSFiddle.
0
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;
https://stackoverflow.com/questions/30159797/unwanted-huge-space-below-td?noredirect=1&lq=1 3/5
6/11/24, 6:40 PM html - Unwanted Huge Space below <td> - Stack Overflow
padding-bottom: 0 !important;
width:100%;
}

img {
width: "auto" !important;
}

Share Improve this answer Follow edited May 11, 2015 at 4:52 answered May 11, 2015 at 4:47
AleshaOleg
2,191 1 15 29

Use 'block' function in CSS rather than using 'td' in html.

0 Share Improve this answer Follow answered May 11, 2015 at 5:02
ALFA
1 2

Don't use a table and avoid !important (http://www.smashingmagazine.com/2010/11/02/the-

important-css-declaration-how-and-when-to-use-it/)
0
.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 {
https://stackoverflow.com/questions/30159797/unwanted-huge-space-below-td?noredirect=1&lq=1 4/5
6/11/24, 6:40 PM html - Unwanted Huge Space below <td> - Stack Overflow
padding-top: 7px;
padding-bottom: 0;
width:100%;
display:block;
}

<div class="figure">
<img src="http://placehold.it/500x500" >
<div 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.</div>
</div>

Run code snippet Expand snippet

Share Improve this answer Follow answered May 11, 2015 at 5:45
Jon P
19.7k 8 50 76

https://stackoverflow.com/questions/30159797/unwanted-huge-space-below-td?noredirect=1&lq=1 5/5