Question

I have created Two Tables, in Table-2, i have just added a tag. The Cell where the tag is used automatically expands. Will anyone kindly explain whats going on. what is the best way to automatically adjust the column sizes equally when adding the tag within a cell. I want Table-2 to look like Table-1 after adding the tag.

<table width="100%">
  <tr height="40">
    <td style=" border: 2px dotted orange" colspan="5" height="auto" align="center">
      <p>Table-1</p>
    </td>

    <tr height="40">
      <td style=" border: 2px dotted orange"></td>
      <td style=" border: 2px dotted orange"></td>
      <td style=" border: 2px dotted orange"></td>
      <td style=" border: 2px dotted orange"></td>
      <td style=" border: 2px dotted orange"></td>
    </tr>
    <tr height="40">
      <td style=" border: 2px dotted orange"></td>
      <td style=" border: 2px dotted orange"></td>
      <td style=" border: 2px dotted orange"></td>
      <td style=" border: 2px dotted orange"></td>
      <td style=" border: 2px dotted orange"></td>
    </tr>

</table>
<br />
<br />
<br />
<table width="100%">
  <tr height="40">
    <td style=" border: 2px dotted orange" colspan="5" height="auto" align="center">
      <p>Table-2</p>
    </td>

    <tr height="40">
      <td style=" border: 2px dotted orange"></td>
      <td style=" border: 2px dotted orange"></td>
      <td style=" border: 2px dotted orange"></td>
      <td style=" border: 2px dotted orange"></td>
      <td style=" border: 2px dotted orange"></td>
    </tr>
    <tr height="40">
      <td style=" border: 2px dotted orange"></td>
      <td style=" border: 2px dotted orange"><a href="http://www.google.com">Search</a></td>
      <td style=" border: 2px dotted orange"></td>
      <td style=" border: 2px dotted orange"></td>
      <td style=" border: 2px dotted orange"></td>
    </tr>

</table>

Answer 1

您可以使用table-layout属性。在您的HTML中，它看起来像这样：

<table width="100%" style=" table-layout: fixed">

...但是理想情况下，它应该在您的CSS样式表中。

Answer 2

只需使用：

td{
width:20%
}

td{
width:20%;
}

<table width="100%">
  <tr height="40">
    <td style=" border: 2px dotted orange" colspan="5" height="auto" align="center">
      <p>Table-1</p>
    </td>

    <tr height="40">
      <td style=" border: 2px dotted orange"></td>
      <td style=" border: 2px dotted orange"></td>
      <td style=" border: 2px dotted orange"></td>
      <td style=" border: 2px dotted orange"></td>
      <td style=" border: 2px dotted orange"></td>
    </tr>
    <tr height="40">
      <td style=" border: 2px dotted orange"></td>
      <td style=" border: 2px dotted orange"></td>
      <td style=" border: 2px dotted orange"></td>
      <td style=" border: 2px dotted orange"></td>
      <td style=" border: 2px dotted orange"></td>
    </tr>

</table>
<br />
<br />
<br />
<table width="100%">
  <tr height="40">
    <td style=" border: 2px dotted orange" colspan="5" height="auto" align="center">
      <p>Table-2</p>
    </td>

    <tr height="40">
      <td style=" border: 2px dotted orange"></td>
      <td style=" border: 2px dotted orange"></td>
      <td style=" border: 2px dotted orange"></td>
      <td style=" border: 2px dotted orange"></td>
      <td style=" border: 2px dotted orange"></td>
    </tr>
    <tr height="40">
      <td style=" border: 2px dotted orange"></td>
      <td style=" border: 2px dotted orange"><a href="http://www.google.com">Search</a></td>
      <td style=" border: 2px dotted orange"></td>
      <td style=" border: 2px dotted orange"></td>
      <td style=" border: 2px dotted orange"></td>
    </tr>

</table>

<a> tag within a table tag

2 个答案: