Firefox/Chromeでtable要素の「position: sticky」が動作しない問題の対処

May 23,2017 12:03 AM
Category:[Google Chrome]
Tag:[]
Permalink

Firefox/Chromeでtable要素の「position: sticky」が動作しない問題の対処方法を紹介します。

1.問題点

テーブルのヘッダ部分がページの上部にさしかかると「position: sticky」で表示が固定されるサンプルを作りました。

<style>
table {
  border-collapse: collapse;
  width: 600px;
}
thead {
  position: sticky;
  top: 0px;
  background: grey;
}
th, td {
  border: solid 1px #00
0000;
}
</style>
<body>
<p>1</p>
<table>
  <thead>
    <tr>
      <th>1-1</th>
      <th>1-2</th>
      <th>1-3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>abc</td>
      <td>def</td>
      <td>ghi</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>def</td>
      <td>ghi</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>def</td>
      <td>ghi</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>def</td>
      <td>ghi</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>def</td>
      <td>ghi</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>def</td>
      <td>ghi</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>def</td>
      <td>ghi</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>def</td>
      <td>ghi</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>def</td>
      <td>ghi</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>def</td>
      <td>ghi</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>def</td>
      <td>ghi</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>def</td>
      <td>ghi</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>def</td>
      <td>ghi</td>
    </tr>
  </tbody>
</table>
<p>2</p>
<table>
  <thead>
    <tr>
      <th>2-1</th>
      <th>2-2</th>
      <th>2-3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>abc</td>
      <td>def</td>
      <td>ghi</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>def</td>
      <td>ghi</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>def</td>
      <td>ghi</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>def</td>
      <td>ghi</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>def</td>
      <td>ghi</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>def</td>
      <td>ghi</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>def</td>
      <td>ghi</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>def</td>
      <td>ghi</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>def</td>
      <td>ghi</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>def</td>
      <td>ghi</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>def</td>
      <td>ghi</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>def</td>
      <td>ghi</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>def</td>
      <td>ghi</td>
    </tr>
  </tbody>
</table>
<p>3</p>
<table>
  <thead>
    <tr>
      <th>3-1</th>
      <th>3-2</th>
      <th>3-3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>abc</td>
      <td>def</td>
      <td>ghi</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>def</td>
      <td>ghi</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>def</td>
      <td>ghi</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>def</td>
      <td>ghi</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>def</td>
      <td>ghi</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>def</td>
      <td>ghi</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>def</td>
      <td>ghi</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>def</td>
      <td>ghi</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>def</td>
      <td>ghi</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>def</td>
      <td>ghi</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>def</td>
      <td>ghi</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>def</td>
      <td>ghi</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>def</td>
      <td>ghi</td>
    </tr>
  </tbody>
</table>
<p>4</p>
<table>
  <thead>
    <tr>
      <th>4-1</th>
      <th>4-2</th>
      <th>4-3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>abc</td>
      <td>def</td>
      <td>ghi</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>def</td>
      <td>ghi</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>def</td>
      <td>ghi</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>def</td>
      <td>ghi</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>def</td>
      <td>ghi</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>def</td>
      <td>ghi</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>def</td>
      <td>ghi</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>def</td>
      <td>ghi</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>def</td>
      <td>ghi</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>def</td>
      <td>ghi</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>def</td>
      <td>ghi</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>def</td>
      <td>ghi</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>def</td>
      <td>ghi</td>
    </tr>
  </tbody>
</table>
</body>

サンプル1

少し前のバージョンのFirefoxやChromeであればこれでヘッダ部分が固定されたのですが、いつの間にか固定されなくなりました。

ということで、tableで「position: sticky」を有効にする方法を調べました。

確認したブラウザのバージョンは下記です。

  • Chrome:58.0.3029.110
  • Firefox:53.0.3

2.tableで「position: sticky」を有効にする

tableで「position: sticky」を有効にするには、下記のCSSを追加する必要があります。

thead, tbody {
  display: table;
}
th, td {
  width: 200px;
}

解説ですが、まずthead要素に「display: table」を追加すればヘッダは固定されるようになります。

thead {
  display: table;
}

ただしこれだけでは幅のレイアウトが崩れてしまうため、tbody要素にも「display: table」を追加し、さらに各th,td要素にwidthプロパティを追加してセル幅を調整します。

このサンプルでは各列のセルが均等幅なので対応できましたが、列ごとにセル幅が異なると厳しいかもしれません。

あと、firefoxでは、

table, tr {
  display: table;
}

も必要っぽいです。

これがないと、スクロールアップしたときに一番上のテーブルのヘッダがきれいに戻らないようです。

サンプル2

3.参考サイト

参考サイトは下記です。ありがとうございました。

Comments [0] | Trackbacks [0]

VBAでセルの罫線に描画する方法

May 17,2017 12:03 AM
Category:[VB/VBA]
Tag:[Excel, VBA]
Permalink

VBAでセルの罫線に描画する方法を紹介します。

VBAでセルの罫線に描画する

1.問題点

VBAでセルの罫線上に、冒頭のスクリーンショットのように矢印を描画する作業が発生しました。

描画する際に分かっている情報は、セルの番地ではなく、開始点および終点の行と列の番号(「3,2」や「3,5」など)ですが、この情報を元に描画する方法が分かりません。

ということで、セルの罫線に描画する方法を紹介します。

2.セルの罫線に描画する

描画するサンプルを下記に示します。

Sub Test()
    Dim start_cell As String
    Dim end_cell As String
    Dim myRange As Range
 
    start_cell = Cells(3, 2).Address
    end_cell = Cells(3, 5).Address
    Set myRange = Range(start_cell, end_cell)
 
    With ActiveSheet.Shapes.AddLine(myRange.Left, myRange.Top, myRange.Left + myRange.Width, myRange.Top).Line
       .ForeColor.RGB = vbBlack
       .EndArrowheadStyle = msoArrowheadTriangle
    End With
End Sub

以下、コードの解説です。

開始点となるセルの番地をCellsプロパティで取得します。セルの番地が予め分かっていればこの行は不要です。

start_cell = Cells(3, 2).Address

同様に、終点となるセルの番地を取得します。

end_cell = Cells(3, 5).Address

Rangeプロパティで2つのセルの範囲を取得します。

Set myRange = Range(start_cell, end_cell)

下のように、Cellsプロパティとあわせて1行にまとめることもできます。

Set myRange = Range(Cells(3, 2), Cells(3, 5))

最後にShapes.AddLineメソッドで線を描画します。

With ActiveSheet.Shapes.AddLine(myRange.Left, myRange.Top, myRange.Left + myRange.Width, myRange.Top).Line
   .ForeColor.RGB = vbBlack
   .EndArrowheadStyle = msoArrowheadTriangle
End With

AddLineメソッドのパラメータは次のとおりです。

  • 第1パラメータ:開始点のX座標
  • 第2パラメータ:開始点のY座標
  • 第3パラメータ:終了点のX座標
  • 第4パラメータ:終了点のY座標

上記のサンプルでは、各パラメータに次のようにあてはめています。

  • 第1パラメータ(開始点のX座標):Rangeプロパティの左端
  • 第2パラメータ(開始点のY座標):Rangeプロパティの上端
  • 第3パラメータ(終了点のX座標):Rangeプロパティの左端に横幅を加えたもの
  • 第4パラメータ(終了点のY座標):Rangeプロパティの上端

また、

  • ForeColor.RGB
  • EndArrowheadStyle

は、線の色および終点のスタイル(矢印)を指定しています。

これで冒頭のスクリーンショットのような線を描画することができます。

点線の場合はAddLineメソッドに下記を追加します。

.DashStyle = msoLineDash
Comments [0] | Trackbacks [0]

C++で「Enable multithreading to use std::thread: Operation not permitted」というエラーになる場合の対処

May 12,2017 12:03 AM
Category:[C/C++]
Tag:[C/C++]
Permalink

C++で「Enable multithreading to use std::thread: Operation not permitted」というエラーになる場合の対処について紹介します。

1.問題点

C++11で実装されたstd::threadを使ったプログラムを作ってみました。

sample.cpp

#include <cstdlib>
#include <iostream>
#include <thread>
 
void task(const std::string msg) {
    std::cout << msg << std::endl;
}
 
int main(int argc, char **argv) {
    std::thread t(task, "Hello World!!");
    t.join();
    return 0;
}

が、このプログラムを実行すると下記の「Enable multithreading to use std::thread: Operation not permitted」というエラーが発生します。

% g++ -std=c++11 sample.cpp
% ./a.out
terminate called after throwing an instance of 'std::system_error'
  what():  Enable multithreading to use std::thread: Operation not permitted
中止 (コアダンプ)

が、このエラーが発生する理由がわかりません。

ということで、このエラーになる場合の対処について紹介します。

2.原因と対処

原因は、コンパイル時に"-pthread"オプションを付与していないためです。

std::threadを利用したプログラムで"-pthread"オプションなしでコンパイルすると、コンパイル時にはエラーにならずに実行時エラーになります。

ということで、"-pthread"オプションを付与してコンパイルすればOKです。

% g++ -std=c++11 -pthread sample.cpp
% ./a.out
Hello World!!

3.参考サイト

参考サイトは下記です。ありがとうございました。

Comments [0] | Trackbacks [0]
 1  |  2  |  3  |  4  |  5  | All pages