LANG SELRCT

コードを書く場所

2020年1月12日日曜日

テーブルのセルの枠を設定したい(border-collapse: collapse)


スタイルを設定せずにテーブルを作るとこうなる



thとtdのスタイルを以下のように設定すると
th, td {
  border: solid 1px lightgray;
}

枠線がついてこうなる



枠線をくっつけるためにtableのスタイルを設定してみる

table {
  border-collapse: collapse;
}



コード.gs
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
意訳
この機能がやること
指定したHTMLファイルを表示する




index.html
<!DOCTYPE html>
<html>

<head>
<style>
table {
  border-collapse: collapse;
}

th, td {
  border: solid 1px lightgray;
}
</style>
</head>

<body>
  <table>
    <tbody>
      <tr>
        <th>caption1</th>
        <th>caption2</th>
        <th>caption3</th>
      </tr>
      <tr>
        <td>1-1</td>
        <td>1-2</td>
        <td>1-3</td>
      </tr>
      <tr>
        <td>2-1</td>
        <td>2-2</td>
        <td>2-3</td>
      </tr>
      <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
      </tr>
    </tbody>
  </table>
</body>
</html>