Central de Ajuda da SmartHR
background
Distribuição de documentos
  1. Central de Ajuda da SmartHR
  2. Opções pagas
  3. Distribuição de documentos
  4. 事前準備
  5. 書類テンプレート
  6. 表のレイアウト調整方法
Esta página ainda não foi traduzida.

表のレイアウト調整方法

Público-alvo:
Para administração
Planos relacionados:
Opcionais Pagos

書類テンプレートに挿入した表は、HTMLモードで編集することで、レイアウトを調整できます。

お問い合わせの多い以下のケースについて、調整方法を説明します。

  • 表の位置や幅を調整したい
  • 余白を詰めたい
  • 列数の異なる表同士を結合したい
  • 罫線を非表示にしたい

表の位置や幅を調整する

表全体を右寄せに配置する

以下のコードをコピーアンドペーストして編集してください。

<div style="width: 70%; float: right;">
<table style="width: 100%">
<tbody>
<tr>
<td>データ1-1</td>
<td>データ1-2</td>
</tr>
<tr>
<td>データ2-1</td>
<td>データ2-2</td>
</tr>
</tbody>
</table>
</div>

表全体を左寄せに配置する

以下のコードをコピーアンドペーストして編集してください。

<div style="width: 70%; float: left;">
<table style="width: 100%">
<tbody>
<tr>
<td>データ1-1</td>
<td>データ1-2</td>
</tr>
<tr>
<td>データ2-1</td>
<td>データ2-2</td>
</tr>
</tbody>
</table>
</div>

表全体を中央寄せに配置する

以下のコードをコピーアンドペーストして編集してください。

<div style="width: 70%; margin:0 auto;">
<table style="width: 100%">
<tbody>
<tr>
<td>データ1-1</td>
<td>データ1-2</td>
</tr>
<tr>
<td>データ2-1</td>
<td>データ2-2</td>
</tr>
</tbody>
</table>
</div>

表全体の横幅を調整する

表の<div style>タグ内にあるwidth : x%;の数値(x)を変更することで、表全体の幅を調整できます。

行の縦幅を指定する

以下のコードをコピーアンドペーストして編集してください。 行の縦幅は、<tr style>タグ内のheight: 50pxの数値を変えると調整できます。

<table>
<tbody>
<tr style="height: 50px">
<td>データ1-1
</td>
<td>データ1-2</td>
</tr>
<tr>
<td>データ2-1</td>
<td>データ2-2</td>
</tr>
</tbody>
</table>

余白を詰める

表の下にできた空白を削除する

表の下に意図せず生じた空白を削除したい場合は、表の開始タグ<table>内のstyle=に続けて、以下を追記してください。 <table>タグ内にstyle=がない場合は、style=も追記してください。

"margin-bottom: 0px;"
表の下の余白を削除した例の書類プレビュー画面のスクリーンショット画像を表示する

表と表の間にある空白を削除する

表と表の間に意図せず生じた空白を削除したい場合は、1つ目の表の開始タグ<table>内にあるstyle=に続けて、以下を追記してください。 <table>タグ内にstyle=がない場合は、style=も追記してください。

"margin-bottom: 0px;" 
tableタグ内にstyleを追記した例のスクリーンショット画像を表示する

さらに、1つ目の表の終了タグ</table>と2つ目の表の開始タグ<table>の間に<p>タグが入っていた場合は、削除します。

表と表の間にあるpタグの例のスクリーンショット画像を表示する 2つの表の間にある余白が詰められた例の書類プレビュー画面のスクリーンショット画像を表示する

列数の異なる表同士を結合する

1つの表でセルの結合を繰り返すと、列の幅が調整しづらくなることがあります。 以下の方法で列数の異なる2つの表を結合することで、1つの表のように表現できます。

まずは同じ列数の項目をまとめた表を、それぞれ追加します。

2つの表が追加された例の書類プレビュー画面のスクリーンショット画像を表示する

それぞれの表の開始タグ<table>内のstyle=に続けて、以下を追記してください。 <table>タグ内にstyle=がない場合は、style=も追記してください。

"margin-bottom: -1px;"
2つの表のtableタグ内にstyleを追記した例のスクリーンショット画像を表示する 2つの表が1つの表のように結合した例の書類プレビュー画面のスクリーンショット画像を表示する

罫線を非表示にする

罫線の全体を非表示にする

表の罫線を非表示にしたい場合は、表の開始タグ<table>内または<td>タグ内のstyle=に続けて、以下を追記してください。 タグ内にstyle=がない場合は、style=も追記してください。

"border-style: hidden;" 
tableタグ内とtdタグ内にstyleを追記した例のスクリーンショット画像を表示する 罫線の全体を非表示にした画面のスクリーンショット画像を表示する

罫線の一部を非表示にする

表の罫線の一部を非表示にしたい場合は、表の開始タグ<table>内または<td>タグ内のstyle=に続けて、以下を追記してください。 タグ内にstyle=がない場合は、style=も追記してください。

上の罫線を非表示にする

"border-top-style: hidden;"

下の罫線を非表示にする

"border-bottom-style: hidden;"

右の罫線を非表示にする

"border-right-style: hidden;"

左の罫線を非表示にする

"border-left-style: hidden;""
tableタグ内とtdタグ内にstyleを追記した例のスクリーンショット画像を表示する 罫線の一部を非表示にした画面のスクリーンショット画像を表示する

Esta página foi útil?