Question

我希望表中的2行相等。宽度为50％，宽度为50％。现在第一行较小，因为其中的文本较少。

我需要网站上的桌子全宽为100％，然后左右两排应该相等。我希望你明白我的意思。

这是我的代码：

<!DOCTYPE html>
<html>

<head>
  <style>
    table {
      width: 100%;
    }
    
    td,
    th {
      text-align: left;
    }
    
    .awesome {
      text-align: right;
      padding-right: 20px;
      vertical-align: top;
      padding-top: 20px;
    }
    
    #prostorzaobrazec {
      vertical-align: top;
      padding-top: 20px;
    }
  </style>
</head>

<body>

  <table>
    <tr>
      <th id="left">Some text</th>
      <th></th>


      <th id="right">Some textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome text</th>
      <th></th>

    </tr>

  </table>
</body>

</html>

Answer 1

这是将数据按50％50％除以int而不是columns-

的方法

rows

table {
  width: 100%;
}

td,
th {
  text-align: left;
}

.awesome {
  text-align: right;
  padding-right: 20px;
  vertical-align: top;
  padding-top: 20px;
}

#prostorzaobrazec {
  vertical-align: top;
  padding-top: 20px;
}

Answer 2

我个人会为此使用div，但这是我对将行设置为我认为您要问的内容的看法：

注意：表格的高度可以设置为任意值，每行将为该值的50％。添加了边框，使其更易于查看。

<!DOCTYPE html>
<html>
<head>
    <style>
    #table {
        height: 500px;
        border-style: solid;
    }
    #rowOne {
        height: 50%;
        outline-style: dashed;
    }
    #rowTwo {
        height: 50%;
        outline-style: dashed;
    }
    
    
    </style>
</head>
<body>
        <div>
    <table id="table">
        
        <tr id="rowOne">
            <th>
            <p>THis is a short paragraph</p>
            </th>
        </tr>
        <tr id="rowTwo">
            <th>
            <p>This is a long paragraph.This is a long paragraph.This is a long paragraph.This is a long paragraph.</p>
            <p>This is a long paragraph.This is a long paragraph.This is a long paragraph.This is a long paragraph.</p>
            <p>This is a long paragraph.This is a long paragraph.This is a long paragraph.This is a long paragraph.</p>
            <p>This is a long paragraph.This is a long paragraph.This is a long paragraph.This is a long paragraph.</p>
        </th>
        </tr>
    
    </table>
</div>


</body>
</html>

Answer 3

我不确定您的意思，但是我从您的问题中得到的想法是：

http://jsfiddle.net/9ymdj6gw/5/

<!DOCTYPE html>
<html>

<head>
  <style>
    table {
      width: 100%;
    }
    
    td,
    th {
      text-align: left;
      width:50%;
      border:1px solid black;
    }
    
    .awesome {
      text-align: right;
      padding-right: 20px;
      vertical-align: top;
      padding-top: 20px;
    }
    
    #prostorzaobrazec {
      vertical-align: top;
      padding-top: 20px;
    }
  </style>
</head>

<body>

  <table>
    <tr>
      <th id="left">Some text</th>


      <th id="right">Some textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome text</th>

    </tr>

  </table>
</body>

</html>

注意：您的脚本中有4个<th>，因此一个原始数据中有4个值。

Answer 4

如果要使用相同宽度的列，请使用table-layout，否则请澄清您的问题：）

它将均匀地喷射色谱柱（演示中为4或2）：

table{table-layout:fixed;}
th {border:solid;}

<!DOCTYPE html>
<html>

<head>
  <style>
    table {
      width: 100%;
    }
    
    td,
    th {
      text-align: left;
    }
    
    .awesome {
      text-align: right;
      padding-right: 20px;
      vertical-align: top;
      padding-top: 20px;
    }
    
    #prostorzaobrazec {
      vertical-align: top;
      padding-top: 20px;
    }
  </style>
</head>

<body>

  <table>
    <tr>
      <th id="left">Some text</th>
      <th></th>


      <th id="right">Some textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome text</th>
      <th></th>

    </tr>

  </table>
   <table><!-- empty cells removed -->
    <tr>
      <th id="left">Some text</th>


      <th id="right">Some textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome text</th>

    </tr>

  </table>
</body>

</html>

还是要隐藏或缩小空单元格？

table{table-layout:fixed;}
th {border:solid;}
:empty {width:0;}
/* remove at screen empty cells from second table */
table + table :empty {display:none;}

<!DOCTYPE html>
<html>

<head>
  <style>
    table {
      width: 100%;
    }
    
    td,
    th {
      text-align: left;
    }
    
    .awesome {
      text-align: right;
      padding-right: 20px;
      vertical-align: top;
      padding-top: 20px;
    }
    
    #prostorzaobrazec {
      vertical-align: top;
      padding-top: 20px;
    }
  </style>
</head>

<body>

  <table>
    <tr>
      <th id="left">Some text</th>
      <th></th>


      <th id="right">Some textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome text</th>
      <th></th>

    </tr>

  </table>
   <table>
    <tr>
      <th id="left">Some text</th>
      <th></th>


      <th id="right">Some textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome text</th>
      <th></th>

    </tr>

  </table>
</body>

</html>

在两个示例中，th都有一个边框，table-layout设置为fixed 第一个示例从代码中删除空表，第二个示例不显示空单元格或将宽度设置为0。

javascript-如何使用css在html中的表中制作两行50％50％？

4 个答案: