質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1537閲覧

Bootstrapを使用したtableにcssを反映させたい

退会済みユーザー

退会済みユーザー

総合スコア0

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

1グッド

0クリップ

投稿2020/01/03 12:04

編集2020/01/04 12:14

Bootstrapを利用してtableを作成しています。
borderの太さをapplication.scssで1pxに指定したのですが、2pxに上書きされてしまいます。
cssでは2pxにするように記述はしていません。
自動で指定されるようになっているのかもしれませんが、どこでそうなったかが分かりません。
2pxの指定を外すにはどうしたら良いでしょうか?

画像はHPの検証画面です。
黄色の枠線の中が該当する部分です。
イメージ説明

users/show.html.erb <%= render 'shared/header' %> <div class="header-space"> <div class="container"> <div class="row"> <div class="col-xs-3"> <h3>User info</h3> <%= attachment_image_tag @user, :profile_image, :fill, 100, 100, format: 'jpeg', fallback: "no_image.jpg", size:'100x100' %> <table class="table"> <tr>    <th><h4>name</h4></th>    <th><%= @user.name %></th>   </tr>   <tr>    <th><h4>introduction</h4></th>    <th><%= @user.introduction %></th>    </tr> </table> <% if @user == current_user %> <div class="row"> <%= link_to edit_user_path(@user), class: "col-xs-12 btn btn-default" do %> <i class="fa fa-wrench"></i> <% end %> </div> <h3>New book</h3> <%= form_for @book do |f| %> <div class="book-form row"> <label for="book_title"><h4>Title</h4></label> <%= f.text_field :title, :class => 'col-xs-12' %> </div> <div class="book-form row"> <label for="book_body"><h4>Opinion</h4></label> <%= f.text_area :body, :class => 'col-xs-12' %> </div> <div class="row"> <%= f.submit 'Create Book', :class => 'col-xs-12 btn btn-primary' %> </div> <% end %> <% end %> </div> <div class="col-xs-9"> <h3>Books</h3> <table class="table table-hover table-inverse"> <thead> <tr> <th></th> <th><h4>Title</h4></th> <th><h4>Opinion</h4></th> </tr> </thead> <% @books.each do |book| %> <tbody> <tr> <td><%= attachment_image_tag book.user, :profile_image, :fill, 40, 40, format: 'jpeg', fallback: "no_image.jpg", size:'40x40' %></td> <td><%= link_to book.title, book_path(book.id) %></td> <td><%= book.body %></td> </tr> </tbody> <% end %> </table> </div> </div> </div> </div> <%= render 'shared/footer' %>
application.scss @import "bootstrap-sprockets"; @import "bootstrap"; @import 'font-awesome-sprockets'; @import 'font-awesome'; * { margin: 0; padding: 0; box-sizing: border-box; } .clearfix::after { content: ""; display: block; clear: both; } .container{ margin-right: auto; margin-left: auto; padding: 0 15px; } h1{ margin-top: 5px; font-size: 20px; color: white; } .header-contents{ display: inline-block; font-size: 13px; font-family: "MS Serif"; } .glyphicon{ padding-right: 5px; } .header-space{ margin-top: 60px; } .top-message{ padding: 0; } .top-title{ font-size: 35px; } .button_wrapper{ text-align: center; } .btn-top{ width: 450px; color: #555555; } .row{ margin-right: -15px; margin-left: -15px; } h3{ font-size: 30px; font-weight: bold; } h4{ font-size: 15px; font-weight: bold; } table { border-collapse: collapse; } .book-form{ margin-bottom: 10px; } .table > thead{ border-bottom: 2px solid #ddd; } .table > tbody{ border-top: 1px solid #ddd; } label{ display: inline-block; } @media screen and (max-width:768px) { .container { width: 750px; } }
takuhito_hihara👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kyoya0819

2020/01/03 14:14

コードは画像で貼らないでください。 コピペで全て貼ってください。 回答しようにも確証を得られません。
退会済みユーザー

退会済みユーザー

2020/01/04 12:15

申し訳ございません。 コードを記述したのでご確認お願い致します。
kyoya0819

2020/01/04 12:50

出力後のHTMLの掲載もお願いします。
guest

回答1

0

ベストアンサー

Bootstrap をインポートしていますが、その中で tbody + tbody に対して以下のようにスタイルが宣言されています (参考)。これにより質問者さんのスタイルが上書きされているため、当該宣言を削除もしくは変更するか、 !important 規則などを用いて質問者さんのスタイルが適用されるようにすることで問題を解決出来ます。

SCSS

1// 2// Basic Bootstrap table 3// 4 5.table { 6 width: 100%; 7 margin-bottom: $spacer; 8 color: $table-color; 9 vertical-align: $table-cell-vertical-align; 10 background-color: $table-bg; // Reset for nesting within parents with `background-color`. 11 12 // 省略 13 14 tbody + tbody { 15 border-top: (2 * $table-border-width) solid $table-border-color; 16 } 17}

SCSS

1.table > tbody { 2 border-top: 1px solid #ddd !important; // 変更 3}

投稿2020/01/06 07:02

編集2020/01/06 07:20
s8_chu

総合スコア14731

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2020/01/06 12:23

ご回答頂きありがとうございます。 !important;を利用して解決できました。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問