Paint top titlebar of a table with bootstrap

Asked

Viewed 971 times

3

How do I paint the top title bar of a table made with bootstrap?

To paint all thead TR.

<div class="pull-right" id="tabela4">
  <br />
  <table class="table table-striped table-ordered table-bordered col-md-4">
    <thead>
      <tr>
        <td><strong>ID</strong></td>
        <td><strong>Tipo</strong></td>
        <td><strong>Descrição</strong></td>
        <td><strong>Usuário</strong></td>
        <td><strong>Data de Inclusão</strong></td>
        <td><strong>Status</strong></td>
        <td></td>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td class="col-xs-2 col-sm-2 col-md-2 col-lg-2"><small>' + this.ID_CRM_Evento + '</small></td>
        <td class="col-xs-2 col-sm-2 col-md-2 col-lg-2"><small>' + this.ID_TipoEvento  + '</small></td>
        <td class="col-xs-2 col-sm-2 col-md-2 col-lg-2"><small>' + this.DE_Descricao  + '</small></td>
        <td class="col-xs-4 col-sm-4 col-md-4 col-lg-4"><small>' + this.DE_Usuario + '</small></td>
        <td class="col-xs-4 col-sm-4 col-md-4 col-lg-4"><small>' + getFormattedDate(this.DT_Inclusao) + '</small></td>
        <td class="col-xs-4 col-sm-4 col-md-4 col-lg-4"><small>' + this.DE_Status + '</small></td>
        <td class="col-xs-2 col-sm-2 col-md-2 col-lg-2"><button type="button" class="btn btn-primary">Visualizar</button></td>
      </tr>
    </tbody>
  </table>
</div>
html css twitter-bootstrap

  • Hello my dear, post your html code, so we can help you, anyway, just write a css with the changes you need, without modifying the css of the bootstrap, and put the link of your css after the css of the bootstrap.

2 answers

2

You can do in your CSS

table thead tr td {background-color:red;}

Fiddle

1

Would that be?

HTML:

<div class="pull-right" id="tabela4">
            <br />
            <table class="table table-striped table-ordered table-bordered col-md-4">
            <thead >
            <tr class="paint">
            <td><strong>ID</strong></td>
            <td><strong>Tipo</strong></td>
            <td><strong>Descrição</strong></td>
            <td><strong>Usuário</strong></td>
            <td><strong>Data de Inclusão</strong></td>
            <td><strong>Status</strong></td>
            <td></td>
            </tr>
            </thead>

            <tbody>
                <tr>
                    <td class="col-xs-2 col-sm-2 col-md-2 col-lg-2"><small>' + this.ID_CRM_Evento + '</small></td>
                    <td class="col-xs-2 col-sm-2 col-md-2 col-lg-2"><small>' + this.ID_TipoEvento  + '</small></td>
                    <td class="col-xs-2 col-sm-2 col-md-2 col-lg-2"><small>' + this.DE_Descricao  + '</small></td>
                    <td class="col-xs-4 col-sm-4 col-md-4 col-lg-4"><small>' + this.DE_Usuario + '</small></td>
                    <td class="col-xs-4 col-sm-4 col-md-4 col-lg-4"><small>' + getFormattedDate(this.DT_Inclusao) + '</small></td>
                    <td class="col-xs-4 col-sm-4 col-md-4 col-lg-4"><small>' + this.DE_Status + '</small></td>
                    <td class="col-xs-2 col-sm-2 col-md-2 col-lg-2"><button type="button" class="btn btn-primary">Visualizar</button></td>
                </tr>
            </tbody>
            </table>
            </div>

CSS:

.paint{
    background-color: green;
}

Example: http://jsfiddle.net/ronnyamarante/3YrhR/1/

Let’s say you also want to remove the rows(edges) of the columns, you can use in css:

thead > tr > td{
    border: none !important;
        border-collapse:collapse;
}

Browser other questions tagged html css twitter-bootstrap

You are not signed in. Login or sign up in order to post.