HTML表格列宽度未按预期显示

Question

我只想尝试连续显示三张图像。但是使用以下代码，前两个图像各占约45%，第三个图像非常小。为什么呢？

<table width="100%">
        <tr>
            <td width="33%">
                    <img src="image1.png" style="width:100%;">
                    <p>Image Name 1</p>
            </td>
            <td width="33%">
                    <img src="image2.png" style="width:100%;">
                    <p>Image Name 2</p>    
            </td>
            <td width="34%">
                    <img src="image3.png" style="width:100%;">
                    <p>Image Name 3</p>
            </td>
        </tr>
</table

Answer 1

而不是<table>，请尝试使用<div>并将width更改为max-width：

＆＃13;

＆＃13;

.cols {overflow: hidden;}
.cols .col-33 {width: 33.33%; float: left;}

＆＃13;

<div class="cols">
  <div class="col-33">
    <img src="//placehold.it/500x50?text=Image+1" style="max-width:100%;">
    <p>Image Name 1</p>
  </div>
  <div class="col-33">
    <img src="//placehold.it/250x50?text=Image+2" style="max-width:100%;">
    <p>Image Name 2</p>
  </div>
  <div class="col-33">
    <img src="//placehold.it/300x50?text=Image+3" style="max-width:100%;">
    <p>Image Name 3</p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;