Tabela Responsiva com CSS e Bootstrap

by Salustiano Silva

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<table class="table table-bordered table-striped table-condensed cf">
	<thead class="cf">
		<tr>
		 	<th></th>
			<th>
                <span class="glyphicon glyphicon-pencil visible-xs" title="Index"></span>
                <span class="hidden-xs">Index</span>
                <input type="checkbox" checked="checked"/>
			</th>
			<th>
                <span class="glyphicon glyphicon-pencil visible-xs" title="Editar"></span>
				<span class="hidden-xs">Editar</span>
                <input type="checkbox"/>
			</th>
			<th>
                <span class="glyphicon glyphicon-pencil visible-xs" title="Criar"></span>
				<span class="hidden-xs">Criar</span>
                <input type="checkbox"/>
			</th>
			<th>
                <span class="glyphicon glyphicon-remove visible-xs" title="Remover"></span>
				<span class="hidden-xs">Remover</span>
                <input type="checkbox"/>
			</th>
			<th>
                <span class="glyphicon glyphicon-export visible-xs" title="Exportar"></span>
				<span class="hidden-xs">Exportar</span>
                <input type="checkbox"/>
			</th>
			<th>
                <span class="glyphicon glyphicon-pencil visible-xs" title="Ver e salvar logs"></span>
				<span class="hidden-xs">Ver e salvar logs</span>
                <input type="checkbox"/>
			</th>
			<th>
                <span class="glyphicon glyphicon-pencil visible-xs" title="Enviar mensagem"></span>
				<span class="hidden-xs">Enviar mensagem</span>
                <input type="checkbox"/>
			</th>
			<th>
                <span class="glyphicon glyphicon-cog visible-xs" title="Moderar"></span>
				<span class="hidden-xs">Moderar</span>
                <input type="checkbox"/>
			</th>
			<th>
                <span class="glyphicon glyphicon-cloud-download visible-xs"...

CSS

table thead th, table tbody td{
    text-align: center;
}

/* Landscape phones and smaller */
@media (max-width: 480px) {
    body, table.cf{
        min-width:360px;
    }
    table.cf thead th{
        font-size:0.6em;
    }
}


/* Landscape phones and portrait tablets */
@media (max-width: 767px) {
    table.cf thead th{
        font-size:0.6em;
    }
}


/* Portrait tablets and small desktops */
@media (min-width: 768px) and (max-width: 991px) {
    table.cf thead th{
        font-size:0.6em;
    }
}


/* Portrait tablets and medium desktops */
@media (min-width: 992px) and (max-width: 1199px) {
    table.cf thead th{
        font-size:0.8em;
    }
}


/* Large desktops and laptops */
@media (min-width: 1200px) {

}