タイトル部分を固定してスクロールできる表の作り方/HTMLとCSSの紹介とそのアレンジ方法/table【初心者向け】
タイトル行とタイトル列の両方を固定した表を作るHTMLとCSSを紹介します。
さらに、タイトルの色、文字サイズ、表全体のサイズの修正方法も紹介します。
HTMLやCSSの編集に慣れない方でも自由に調整できるように、どこを編集すればどこが変化するかわかるように説明しています。
作成する表
このような表を作成します。
| 列タイトル1 | 列タイトル2 | 列タイトル3 | 列タイトル4 | 列タイトル5 | 列タイトル6 | 列タイトル7 | 列タイトル8 | 列タイトル9 | 列タイトル10 | 列タイトル11 | 列タイトル12 |
|---|---|---|---|---|---|---|---|---|---|---|---|
| 行タイトル1 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| 行タイトル2 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 行タイトル3 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 |
| 行タイトル4 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 |
| 行タイトル5 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 |
| 行タイトル6 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 |
| 行タイトル7 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 |
| 行タイトル8 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 |
| 行タイトル9 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 |
| 行タイトル10 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 |
| 行タイトル11 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 |
| 行タイトル12 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 |
| 行タイトル13 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 |
| 行タイトル14 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 |
| 行タイトル15 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 |
| 行タイトル16 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 |
| 行タイトル17 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 |
| 行タイトル18 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 |
| 行タイトル19 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 |
| 行タイトル20 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 |
下にスクロールした際は上部のタイトルが固定されて表示されたままになっており、右にスクロールした場合は左側のタイトルが固定されて表示されたままになっています。
このように列数と行数がかなり多い表では、普通に作成すると表の端の方を見ているときにどの行やどの列なのかわからなくなってしまいます。
また、環境によって非常に小さく表示されたり、ページをはみ出したりしてしまうことがあるかもしれません。
行と列の両方のタイトルを固定した表にすると、とても見やすくなります。
では、この表のHTMLとCSSを紹介します。
HTMLの記載内容
<div class="box-fix-column-row">
<table class="fix-column-row">
<thead>
<tr>
<th class="fix1">列タイトル1</th>
<th class="fix2">列タイトル2</th>
<th class="fix2">列タイトル3</th>
<th class="fix2">列タイトル4</th>
<th class="fix2">列タイトル5</th>
<th class="fix2">列タイトル6</th>
<th class="fix2">列タイトル7</th>
<th class="fix2">列タイトル8</th>
<th class="fix2">列タイトル9</th>
<th class="fix2">列タイトル10</th>
<th class="fix2">列タイトル11</th>
<th class="fix2">列タイトル12</th>
</tr>
</thead>
<tbody>
<tr>
<td class="fix2">行タイトル1</td>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td class="fix2">行タイトル2</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
<tr>
<td class="fix2">行タイトル3</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
</tr>
<tr>
<td class="fix2">行タイトル4</td>
<td>30</td>
<td>31</td>
<td>32</td>
<td>33</td>
<td>34</td>
<td>35</td>
<td>36</td>
<td>37</td>
<td>38</td>
<td>39</td>
<td>40</td>
</tr>
<tr>
<td class="fix2">行タイトル5</td>
<td>40</td>
<td>41</td>
<td>42</td>
<td>43</td>
<td>44</td>
<td>45</td>
<td>46</td>
<td>47</td>
<td>48</td>
<td>49</td>
<td>50</td>
</tr>
<tr>
<td class="fix2">行タイトル6</td>
<td>50</td>
<td>51</td>
<td>52</td>
<td>53</td>
<td>54</td>
<td>55</td>
<td>56</td>
<td>57</td>
<td>58</td>
<td>59</td>
<td>60</td>
</tr>
<tr>
<td class="fix2">行タイトル7</td>
<td>60</td>
<td>61</td>
<td>62</td>
<td>63</td>
<td>64</td>
<td>65</td>
<td>66</td>
<td>67</td>
<td>68</td>
<td>69</td>
<td>70</td>
</tr>
<tr>
<td class="fix2">行タイトル8</td>
<td>70</td>
<td>71</td>
<td>72</td>
<td>73</td>
<td>74</td>
<td>75</td>
<td>76</td>
<td>77</td>
<td>78</td>
<td>79</td>
<td>80</td>
</tr>
<tr>
<td class="fix2">行タイトル9</td>
<td>80</td>
<td>81</td>
<td>82</td>
<td>83</td>
<td>84</td>
<td>85</td>
<td>86</td>
<td>87</td>
<td>88</td>
<td>89</td>
<td>90</td>
</tr>
<tr>
<td class="fix2">行タイトル10</td>
<td>90</td>
<td>91</td>
<td>92</td>
<td>93</td>
<td>94</td>
<td>95</td>
<td>96</td>
<td>97</td>
<td>98</td>
<td>99</td>
<td>100</td>
</tr>
<tr>
<td class="fix2">行タイトル11</td>
<td>100</td>
<td>101</td>
<td>102</td>
<td>103</td>
<td>104</td>
<td>105</td>
<td>106</td>
<td>107</td>
<td>108</td>
<td>109</td>
<td>110</td>
</tr>
<tr>
<td class="fix2">行タイトル12</td>
<td>110</td>
<td>111</td>
<td>112</td>
<td>113</td>
<td>114</td>
<td>115</td>
<td>116</td>
<td>117</td>
<td>118</td>
<td>119</td>
<td>120</td>
</tr>
<tr>
<td class="fix2">行タイトル13</td>
<td>120</td>
<td>121</td>
<td>122</td>
<td>123</td>
<td>124</td>
<td>125</td>
<td>126</td>
<td>127</td>
<td>128</td>
<td>129</td>
<td>130</td>
</tr>
<tr>
<td class="fix2">行タイトル14</td>
<td>130</td>
<td>131</td>
<td>132</td>
<td>133</td>
<td>134</td>
<td>135</td>
<td>136</td>
<td>137</td>
<td>138</td>
<td>139</td>
<td>140</td>
</tr>
<tr>
<td class="fix2">行タイトル15</td>
<td>140</td>
<td>141</td>
<td>142</td>
<td>143</td>
<td>144</td>
<td>145</td>
<td>146</td>
<td>147</td>
<td>148</td>
<td>149</td>
<td>150</td>
</tr>
<tr>
<td class="fix2">行タイトル16</td>
<td>150</td>
<td>151</td>
<td>152</td>
<td>153</td>
<td>154</td>
<td>155</td>
<td>156</td>
<td>157</td>
<td>158</td>
<td>159</td>
<td>160</td>
</tr>
<tr>
<td class="fix2">行タイトル17</td>
<td>160</td>
<td>161</td>
<td>162</td>
<td>163</td>
<td>164</td>
<td>165</td>
<td>166</td>
<td>167</td>
<td>168</td>
<td>169</td>
<td>170</td>
</tr>
<tr>
<td class="fix2">行タイトル18</td>
<td>170</td>
<td>171</td>
<td>172</td>
<td>173</td>
<td>174</td>
<td>175</td>
<td>176</td>
<td>177</td>
<td>178</td>
<td>179</td>
<td>180</td>
</tr>
<tr>
<td class="fix2">行タイトル19</td>
<td>180</td>
<td>181</td>
<td>182</td>
<td>183</td>
<td>184</td>
<td>185</td>
<td>186</td>
<td>187</td>
<td>188</td>
<td>189</td>
<td>190</td>
</tr>
<tr>
<td class="fix2">行タイトル20</td>
<td>190</td>
<td>191</td>
<td>192</td>
<td>193</td>
<td>194</td>
<td>195</td>
<td>196</td>
<td>197</td>
<td>198</td>
<td>199</td>
<td>200</td>
</tr>
</table>
</table>
</div>このHTMLを投稿画面で入力すると記事中に表が出現します。
WordPressを利用している方は、投稿記事にHTMLコードを入力するにはブロックエディタの「カスタムHTML」というブロックを使用します。
以下のブログがわかりやすかったので参考にしてみてください。
ただし、この段階ではまだタイトルの固定はされていません。
CSSの設定が必要です。
CSSの記載内容
div.box-fix-column-row {
width:100%;
height:600px;
background: #ffffff;
border:1px solid #ffffff;
overflow:auto;
}
table.fix-column-row {
width: 1600px;
}
table.fix-column-row th, table.fix-column-row td {
width: 30px;
height: 80px;
vertical-align: middle;
padding: 0 15px;
border: 1px solid #cccccc;
}
table.fix-column-row .fix1,
table.fix-column-row .fix2 {
position: sticky;
top: 0;
left: 0;
color: #ffffff;
background: #6699ff;
font-size: 1.0em;
}
table.fix-column-row .fix1:before,
table.fix-column-row .fix2:before {
content: "";
position: absolute;
top: -1px;
left: -1px;
width: 100%;
height: 100%;
border: 1px solid #cccccc;
}
table.fix-column-row .fix1 {
z-index: 2;
}
table.fix-column-row .fix2 {
z-index: 1;
}このCSSを追加することで、表のタイトルが固定されます。
CSSはプラグインを利用すると簡単で安全に追加することができます。
以下のブログがわかりやすかったので参考にしてみてください。
参考：Simple Custom CSS – テーマを編集せずにCSSをカスタマイズできるWordPressプラグイン ねたわん
この他にも、style.cssを編集する方法や使用するテーマによっては独自に設けられている入力方法がありますので、慣れている人はそれらの方法でCSSを追加しましょう。
表の見た目を修正する
このCSSを編集すると表の見た目を変更することができます。
ここからは「見た目を変更した表」と「編集したCSS」の紹介、そしてCSSのどこをどのように修正したかを説明します。
行と列のタイトル色を変更する
タイトルの色を変更する方法です。
固定される部分に色がつくことで、構成がわかりやすく見やすい表に変わります。
| 列タイトル1 | 列タイトル2 | 列タイトル3 | 列タイトル4 | 列タイトル5 | 列タイトル6 | 列タイトル7 | 列タイトル8 | 列タイトル9 | 列タイトル10 | 列タイトル11 | 列タイトル12 |
|---|---|---|---|---|---|---|---|---|---|---|---|
| 行タイトル1 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| 行タイトル2 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 行タイトル3 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 |
| 行タイトル4 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 |
| 行タイトル5 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 |
| 行タイトル6 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 |
| 行タイトル7 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 |
| 行タイトル8 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 |
| 行タイトル9 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 |
| 行タイトル10 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 |
| 行タイトル11 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 |
| 行タイトル12 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 |
| 行タイトル13 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 |
| 行タイトル14 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 |
| 行タイトル15 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 |
| 行タイトル16 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 |
| 行タイトル17 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 |
| 行タイトル18 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 |
| 行タイトル19 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 |
| 行タイトル20 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 |
タイトルの背景を青色にして、文字を白色にしてみました。
CSSの内容は以下のようになっています。
/*表のタイトル固定*/
div.box-fix-column-row {
width:100%;
height:600px;
background: #ffffff;
border:1px solid #ffffff;
overflow:auto;
}
table.fix-column-row {
width: 1600px;
}
table.fix-column-row th, table.fix-column-row td {
width: 30px;
height: 80px;
vertical-align: middle;
padding: 0 15px;
border: 1px solid #ccc;
}
table.fix-column-row-bl .fix1,
table.fix-column-row-bl .fix2 {
position: sticky;
top: 0;
left: 0;
color: #ffffff;
background: #66ccff;
font-size: 1.0em;
}
table.fix-column-row .fix1:before,
table.fix-column-row .fix2:before {
content: "";
position: absolute;
top: -1px;
left: -1px;
width: 100%;
height: 100%;
border: 1px solid #cccccc;
}
table.fix-column-row .fix1 {
z-index: 2;
}
table.fix-column-row .fix2 {
z-index: 1;
}
編集したのは27行目と28行目です。
最初の表では以下のように記述していました。
color: #000000;
background: #ffffff;「color」と書かれた行が文字の色を決める文字列です。
「background」と書かれた行が背景の色を決める文字列です。
それぞれ、色を6桁の英数字で指定しています。
#000000は黒、#ffffffは白を指定する英数字です。
この英数字を別のものに修正することで、タイトルの色を好きな色に変更することができます。
この表での記述は以下のとおりです。
color: #ffffff;
background: #6699ff;colorに「#ffffff」と入力し文字を白に変更し、backgroundに「#66ccff」と入力し背景を青色に変更しています。
色を指定する英数字は、以下のようなサイトで探すことができます。
参考：カラーピッカー[Color Picker] /セーフカラー みんなの知識 ちょっと便利帳
フォントサイズを変更する
タイトルの文字サイズを変更する方法です。
固定されるタイトルの文字を大きく表示して強調することができます。
| 列タイトル1 | 列タイトル2 | 列タイトル3 | 列タイトル4 | 列タイトル5 | 列タイトル6 | 列タイトル7 | 列タイトル8 | 列タイトル9 | 列タイトル10 | 列タイトル11 | 列タイトル12 |
|---|---|---|---|---|---|---|---|---|---|---|---|
| 行タイトル1 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| 行タイトル2 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 行タイトル3 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 |
| 行タイトル4 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 |
| 行タイトル5 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 |
| 行タイトル6 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 |
| 行タイトル7 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 |
| 行タイトル8 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 |
| 行タイトル9 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 |
| 行タイトル10 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 |
| 行タイトル11 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 |
| 行タイトル12 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 |
| 行タイトル13 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 |
| 行タイトル14 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 |
| 行タイトル15 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 |
| 行タイトル16 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 |
| 行タイトル17 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 |
| 行タイトル18 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 |
| 行タイトル19 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 |
| 行タイトル20 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 |
タイトルの文字を1.2倍に大きくしてみました。
CSSの内容は以下のようになっています。
/*表のタイトル固定*/
div.box-fix-column-row {
width:100%;
height:600px;
background: #ffffff;
border:1px solid #ffffff;
overflow:auto;
}
table.fix-column-row {
width: 1600px;
}
table.fix-column-row th, table.fix-column-row td {
width: 30px;
height: 80px;
vertical-align: middle;
padding: 0 15px;
border: 1px solid #ccc;
}
table.fix-column-row-bl .fix1,
table.fix-column-row-bl .fix2 {
position: sticky;
top: 0;
left: 0;
color: #ffffff;
background: #66ccff;
font-size: 1.2em;
}
table.fix-column-row .fix1:before,
table.fix-column-row .fix2:before {
content: "";
position: absolute;
top: -1px;
left: -1px;
width: 100%;
height: 100%;
border: 1px solid #cccccc;
}
table.fix-column-row .fix1 {
z-index: 2;
}
table.fix-column-row .fix2 {
z-index: 1;
}
編集したのは29行目です。
最初の表では以下のように記述していました。
font-size: 1.0em;「font-size」と書かれた行が文字のサイズを決める文字列です。
「1.0em」という部分がサイズを指定する英数字です。
これは相対的な文字サイズを意味していて、そのWebページで通常使用される文字サイズの何倍かを示しています。
1.0emとは1.0倍を意味するので、通常の文字サイズで表示されます。
この数字部分を修正することで、タイトルの文字サイズを好きなサイズに変更することができます。
この表での記述は以下のとおりです。
font-size: 1.2em;1.2emと入力して、文字サイズが1.2倍で表示されるようにしています。
表全体のサイズを変更する
表全体のサイズを変更する方法です。
表の表示される範囲を小さくしたり大きくしたりすることができます。
| 列タイトル1 | 列タイトル2 | 列タイトル3 | 列タイトル4 | 列タイトル5 | 列タイトル6 | 列タイトル7 | 列タイトル8 | 列タイトル9 | 列タイトル10 | 列タイトル11 | 列タイトル12 |
|---|---|---|---|---|---|---|---|---|---|---|---|
| 行タイトル1 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| 行タイトル2 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 行タイトル3 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 |
| 行タイトル4 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 |
| 行タイトル5 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 |
| 行タイトル6 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 |
| 行タイトル7 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 |
| 行タイトル8 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 |
| 行タイトル9 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 |
| 行タイトル10 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 |
| 行タイトル11 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 |
| 行タイトル12 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 |
| 行タイトル13 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 |
| 行タイトル14 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 |
| 行タイトル15 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 |
| 行タイトル16 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 |
| 行タイトル17 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 |
| 行タイトル18 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 |
| 行タイトル19 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 |
| 行タイトル20 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 |
表の縦と横のサイズを8割程度の大きさに小さくしてみました。
CSSの内容は以下のようになっています。
/*表のタイトル固定*/
div.box-fix-column-row {
width:80%;
height:400px;
background: #ffffff;
border:1px solid #ffffff;
overflow:auto;
}
table.fix-column-row {
width: 1600px;
}
table.fix-column-row th, table.fix-column-row td {
width: 30px;
height: 80px;
vertical-align: middle;
padding: 0 15px;
border: 1px solid #ccc;
}
table.fix-column-row-bl .fix1,
table.fix-column-row-bl .fix2 {
position: sticky;
top: 0;
left: 0;
color: #ffffff;
background: #66ccff;
font-size: 1.2em;
}
table.fix-column-row .fix1:before,
table.fix-column-row .fix2:before {
content: "";
position: absolute;
top: -1px;
left: -1px;
width: 100%;
height: 100%;
border: 1px solid #cccccc;
}
table.fix-column-row .fix1 {
z-index: 2;
}
table.fix-column-row .fix2 {
z-index: 1;
}編集したのは3行目と4行目です。
最初の表では以下のように記述していました。
width:100%;
height:600px;「width」と書かれた行が表の幅を決める文字列です。
「height」という行が表の高さを指定する文字列です。
サイズの指定の方法はいくつかあります。widthはページの幅に対する割合でサイズを指定していて、heightはピクセル数でサイズを指定しています。
widthは100%と入力しているため、ページ幅の最大サイズで表が表示されます。
heightは600pxと入力しているため、画面の大きさに関わらず600pxの高さで表が表示されます。
この数字を別のものに修正することで、表を好きなサイズに変更することができます。
この表での記述は以下のとおりです。
width:80%;
height:400px;widthは80%と入力しているため、ページ幅の8割のサイズで表が表示されます。
heightは400pxと入力しているため、画面の大きさに関わらず400pxで表の高さで表が表示されます。
まとめ
いかがでしたでしょうか。
行タイトルと列タイトルを固定した表の作成方法を紹介いたしました。
この方法だと、情報量が多い表をWebページに載せたい場合でも、見やすくならずに表示することができます。
色、文字サイズ、表サイズの大きさも紹介したように修正すると、アレンジできると思いますので、ぜひ参考にしていただければと思います。