0

入力フィールドを追加するまでは、13 列のテーブルを適切に配置していましたが、列 (垂直) 方向の配置が崩れていました。入力サイズを 3vw に減らしても効果がなく、その行のセルが他の行やセルに比べて小さすぎます。

また、データ セルとヘッダーに colSpan を追加しようとしましたが、効果はありませんでした。

次の表の列を整列するにはどうすればよいですか。

<table className={style2}>
  <thead>
    <tr>
      <th colSpan={13}>
        <h3 className={cell_style}>Today: Workout A: TB Stool, TB Rows, DB Incline, Lat Raises
        </h3>
      </th>
    </tr>
    <tr>
      <th className={cell_style}>#</th>
      <th colSpan={3} className={cell_style}>TB Stool</th>
      <th colSpan={3} className={cell_style}>TB Rows</th>
      <th colSpan={3} className={cell_style}>DB Incline</th>
      <th colSpan={3} className={cell_style}>Lat Raises</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td className={cell_style}>#</td>

      <td className={cell_style}>Weight</td>
      <td className={cell_style}>Reps</td>
      <td className={cell_style}>Reserve</td>

      <td className={cell_style}>Weight</td>
      <td className={cell_style}>Reps</td>
      <td className={cell_style}>Reserve</td>

      <td className={cell_style}>Weight</td>
      <td className={cell_style}>Reps</td>
      <td className={cell_style}>Reserve</td>

      <td className={cell_style}>Weight</td>
      <td className={cell_style}>Reps</td>
      <td className={cell_style}>Reserve</td>
    </tr>

    <tr>
      <form action="">
        <td className={cell_style} colSpan={1}>#</td>

        <td className={cell_style} colSpan={1}><input type="text" className={input_style} value='50' /></td>
        <td className={cell_style}><input type="text" className={input_style}/>15</td>
        <td className={cell_style}><input type="text" className={input_style}/>0</td>

        <td className={cell_style}><input type="text" className={input_style}/>58</td>
        <td className={cell_style}><input type="text" className={input_style}/>14</td>
        <td className={cell_style}><input type="text" className={input_style}/>2</td>

        <td className={cell_style}><input type="text" className={input_style}/>20</td>
        <td className={cell_style}><input type="text" className={input_style}/>13</td>
        <td className={cell_style}><input type="text" className={input_style}/>1</td>

        <td className={cell_style}><input type="text" className={input_style}/>5</td>
        <td className={cell_style}><input type="text" className={input_style}/>15</td>
        <td className={cell_style}><input type="text" className={input_style}/>0</td>

      </form>
    </tr>

  </tbody>

</table>

4

2 に答える 2

0

form内にtd要素をラップすることはできません。テーブル全体をラップする必要があります：

<form>
    <table>
        <tr>
            <td><input type="text" value="10" class=""></td>
            ....
        </tr>
    </table>
</form>

className属性もありません。class=""を使用する必要があります

入力値はvalue属性にある必要があります

于 2018-07-12T23:40:34.543 に答える
0

Aを a 、またはformの子要素にすることはできません。tabletbodytr

内にテーブル全体を含めることができますform。form表のセルの中に を含めることができます。ただし、フォーム内にテーブルの一部を含めることはできません。

類似参照:テーブル内のフォーム

問題を解決するには、テーブル全体をフォーム内にラップする必要があります。

以下からフォームを削除します。

<tr>
   <form action="">
   [...]
   </form>
</tr>

テーブル全体をラップします。

<form action="">
   <table className={style2}>
   [...]
   </table>
<form>

ドキュメント、HTML フォーム タグを参照してください。

于 2018-07-12T23:41:27.633 に答える