如何在HTML中正确设置表的列宽？

Question

在下面的html代码中，我创建了一个表。但是列宽不正确。我还添加了css代码和输出图像。请告诉我哪里错了，为什么表格栏宽不相等。提前谢谢。

<header>
  <h1>My Guitar Shop</h1>
</header>
<header>
  <h1>Product Manager</h1>
</header>
<main>
  <h1>Product List</h1>
  <section id="cat">
    <!-- display a list of categories -->
    <h2>Categories</h2>
    <nav>
      <ul>
        <li><a href="?category_id=1">Guitars</a>
        </li>
        <li><a href="?category_id=2">Basses</a>
        </li>
        <li><a href="?category_id=3">Drums</a>
        </li>
        <li><a href="?category_id=4">Flutes</a>
        </li>
        <li><a href="?category_id=5">Trumpets</a>
        </li>
      </ul>
    </nav>
  </section>
  <section id="prod">
    <!-- display a table of products -->
    <h2>Guitars</h2>
    <table>
      <tr>
        <th>Code</th>
        <th>Name</th>
        <th>Price</th>
        <th>Delete</th>
      </tr>
      <tr>
        <td>gu</td>
        <td>ytr</td>
        <td>0000000546</td>
        <td>
          <form action="#" method="post">
            <input type="hidden" name="action" value="delete_product" />
            <input type="hidden" name="id" value="19" />
            <input type="hidden" name="category_id" value="1" />
            <input type="submit" value="Delete" />
          </form>
        </td>
      </tr>
      <tr>
        <td>yui</td>
        <td>uyt</td>
        <td>0000000888</td>
        <td>
          <form action="#" method="post">
            <input type="hidden" name="action" value="delete_product" />
            <input type="hidden" name="id" value="23" />
            <input type="hidden" name="category_id" value="1" />
            <input type="submit" value="Delete" />
          </form>
        </td>
      </tr>
      <tr>
        <td>oi</td>
        <td>iu</td>
        <td>0000000098</td>
        <td>
          <form action="#" method="post">
            <input type="hidden" name="action" value="delete_product" />
            <input type="hidden" name="id" value="24" />
            <input type="hidden" name="category_id" value="1" />
            <input type="submit" value="Delete" />
          </form>
        </td>
      </tr>
    </table>
    <p><a href="?action=show_add_form">Add Product</a></p>
  </section>
</main>
<footer>
  <p>&copy; 2017 My Guitar Shop, Inc.</p>
</footer>

//base cases
...
res = false;
for(i=0; i<length; i++)
    if (s[i]<= n)
        res = res ||  isSumOf(s[], length, n - s[i]);
return res;

Answer 1

您可以从css

设置宽度

th, td {
    width: 33.33333333%;
}

Answer 2

将此代码用于table，td和th

table {
 overflow: auto;
 table-layout: fixed;
 width: 100%;
 border-collapse: collapse;
}
table tr td, table tr th{
 width:1%;
 border: 1px solid black;
 text-align: center;
}

你不能使用表格的高度和显示块。

Answer 3

如果您要查找的是一个填充100％宽度的表格，并且当内容超出高度时也会显示滚动条，那么您可以执行以下操作。

首先，从表的css中删除 "display: block;"属性。它消除了表及其子标签（tr，td，th等）的许多固有属性。

现在，将表格包装在固定高度的div中，并在css中给出div固定高度和overflow-y属性，如下所示。

<强> HTML

<div class="table-container">
   <table>
       ...table contents...
   </table>
</div>

<强> CSS

.table-container {
  height: 100px;
  overflow-y: auto;
}

/* Table has the following css now. */

table {
table-layout: fixed;
width: 100%;
}

参见 JS Fiddle 。 https://jsfiddle.net/rhk217/L4khbs2j/

Answer 4

您可以将表格包装在div中，并将max-height和overflow: scroll提供给该div。很容易 Codepen链接 https://codepen.io/yashagw/pen/wezzVj

Answer 5

请勿将display: block;用于表格。只需使用默认表格显示（table-cell）即可。

Answer 6

删除enter code here Declare v_id Varchar2(100):= 'abc.defghijklmnop@qrst.uv.wxyz'; v_id1 Varchar2(100); v_id2 Varchar2(100); v_id3 Varchar2(100); v_id4 Varchar2(100); v_id5 Varchar2(100); v_id6 Varchar2(100); Begin Select v_id, instr(v_id,'.'), instr(v_id,'@'), Case When instr(v_id,'.') >=6 Then '*****'|| substr(v_id,6,(instr(v_id,'@')-5)) Else rpad(lpad('.',instr(v_id,'.'),'*'),6,'*') || substr(v_id,7,(instr(v_id,'@')- 6)) End testing Into v_id1,v_id2,v_id3,v_id4 From dual; dbms_output.put_line(v_id1); dbms_output.put_line(v_id2); dbms_output.put_line(v_id3); dbms_output.put_line(v_id4); End; o/p::: abc.defghijklmnop@qrst.uv.wxyz. 4 18 ***.**fghijklmnop@ SELECT REGEXP_REPLACE (substr(instr('abc.defghijklmnop@qrstname.uv.wxyz','@')+1),'^[.].'*') FROM dual; Output: abc.defghijklmnop@****.**.****

尝试以下

display: block;