Bootstrap remove panel outline

Question

I'm having difficulties with two things in Bootstrap 3:

• I would like to remove the outline of the Panel object - the blue line around the whole thing

• Inside the panel I have placed a table, I would love to remove lines separating the rows, but only in the table head. (that header is the area with the darker gray background)

Are these two things even possible?

Please have a look

<div class="panel panel-primary" id="panel" style="display: block;">
<div class="panel-heading" id="heading">1387537097625.xls</div>
<div id="table">
    <table id="changes" class="table table-striped table-condensed">
        <thead style="font-weight: bold; background-color: rgb(192, 192, 192);">
            <tr>
                <td>Price List Name</td>
                <td style="font-weight: normal;">Price list</td>
                <td></td>
                <td colspan="2"></td>
                <td colspan="3"></td>
            </tr>
            <tr>
                <td>Currency</td>
                <td style="font-weight: normal;">EUR</td>
                <td></td>
                <td colspan="2">Existing price breaks</td>
                <td colspan="3">New price breaks</td>
            </tr>
            <tr>
                <td>Product Range</td>
                <td>Product Description</td>
                <td>Productid(s)</td>
                <td>1+</td>
                <td>500+</td>
                <td>1+</td>
                <td>250+</td>
                <td>1000+</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Range</td>
                <td>Some description here</td>
                <td>559</td>
                <td class="warning">17.6</td>
                <td></td>
                <td class="warning">17.6</td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>Another Range</td>
                <td>Different description here</td>
                <td>506</td>
                <td class="warning">23.15</td>
                <td></td>
                <td class="warning">23.15</td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>
</div>

Answer 1

It's possible and pretty easy.

It's all in the bootstrap stylesheet and you can make your own style changes to anything there is. Rather than just writing over the lines in the bootstrap.css, I'd recommend creating your own CSS file and add it to your page after the bootstrap.css. That way your styles are loaded last and affect to the elements. And in case there's something wrong in your CSS the styles come from the bootstrap.css.

So add the files like:

<link href="bootstrap.min.css" type="text/css" rel="stylesheet">
<link href="yourStyles.css" type="text/css" rel="stylesheet">

And the style definitions you need to do to yourStyles.css are:

.panel {
    border: 0;
}

.table > thead > tr > th, .table > thead > tr > td {
    border: 0;
}

The .panel removes the border around the whole panel and the latter removes the border-bottom which the table headings have.

Here's a Fiddle: http://jsfiddle.net/pUb6s/1/

For the future, you can find the styles effecting to some element by using some browser developer tool. Ie. if you're using Firefox just right click the element and select Inspect Element, it shows the HTML and CSS.

Answer 2

.panel-borderless {
  border: 0;
  box-shadow: none;
}