Center image element and decrease column size in Table

Asked

Viewed 132 times

0

[toggle title="ADMINISTRAÇÃO GERAL - RODRIGO RENNÓ" state="close"]
<table class="table">
<thead>
<tr>
<th>Disponível</th>
<th>Conteúdo</th>
<th></th>
</tr>
</thead>
<tbody>
<tr class="success">
<td class="text-center">AULA 00</td>
<td width="50%">Planejamento: planejamento estratégico; planejamento baseado em cenários</td>
<td class="text-center"><a class="video desinfo" data-toggle="popover-click" data-placement="top"><span class="bullet">3</span></a> <!-- <a href='' class="pdf desinfo"></a> -->
<div class="pdf desinfo"></div></td>
</tr>
<tr class="success">
<td class="text-center">AULA 01</td>
<td width="50%">Gerenciamento de processos</td>
<td class="text-center"><a class="video desinfo" data-toggle="popover-click" data-placement="top"><span class="bullet">5</span></a> <!-- <a href='' class="pdf desinfo"></a> -->
<div class="pdf desinfo"></div></td>
</tr>
<tr class="info">
<td class="text-center">AULA 02</td>
<td width="50%">Gestão de Projetos</td>
<td class="text-center"><a class="video desinfo" data-toggle="popover-click" data-placement="top"><span class="bullet">5</span></a> <!-- <a href='' class="pdf desinfo"></a> -->
<div class="pdf desinfo"></div></td>
</tr>
<tr class="info">
<td class="text-center">AULA 03</td>
<td width="50%">Processo decisório: técnicas de análise e solução de problemas; fatores que afetam a decisão; tipos de decisões. Governança corporativa</td>
<td class="text-center"><a class="video desinfo" data-toggle="popover-click" data-placement="top"><span class="bullet">5</span></a> <!-- <a href='' class="pdf desinfo"></a> -->
<div class="pdf desinfo"></div></td>
</tr>
<tr class="info">
<td class="text-center">AULA 04</td>
<td width="50%">Comunicação organizacional: habilidades e elementos da comunicação; Avaliação de desempenho</td>
<td class="text-center"><a class="video desinfo" data-toggle="popover-click" data-placement="top"><span class="bullet">4</span></a> <!-- <a href='' class="pdf desinfo"></a> -->
<div class="pdf desinfo"></div></td>
</tr>
<tr class="info">
<td class="text-center">AULA 05</td>
<td width="50%">Gestão de pessoas: estilos de liderança; gestão por competências</td>
<td class="text-center"><a class="video desinfo" data-toggle="popover-click" data-placement="top"><span class="bullet">5</span></a> <!-- <a href='' class="pdf desinfo"></a> -->
<div class="pdf desinfo"></div></td>
</tr>
<tr class="info">
<td class="text-center">AULA 06</td>
<td width="50%">Controle administrativo: indicadores de desempenho; conceitos de eficiência, eficácia e efetividade; trabalho em equipe</td>
<td class="text-center"><a class="video desinfo" data-toggle="popover-click" data-placement="top"><span class="bullet">2</span></a> <!-- <a href='' class="pdf desinfo"></a> -->
<div class="pdf desinfo"></div></td>
</tr>
<tr class="info">
<td class="text-center">AULA 07</td>
<td width="50%">Motivação</td>
<td class="text-center"><a class="video desinfo" data-toggle="popover-click" data-placement="top"><span class="bullet">4</span></a> <!-- <a href='' class="pdf desinfo"></a> -->
<div class="pdf desinfo"></div></td>
</tr>
<tr class="info">
<td class="text-center">AULA 08</td>
<td width="50%">Gestão das Mudanças</td>
<td class="text-center"><!-- <a href='' class="pdf desinfo"></a> -->
<div class="pdf desinfo"></div></td>
</tr>
<tr class="info">
<td class="text-center">AULA 09</td>
<td width="50%">Operações com conjuntos</td>
<td class="text-center"><!-- <a href='' class="pdf desinfo"></a> -->
<div class="pdf desinfo"></div></td>
</tr>
</tbody>
</table>
[/toggle]

How do I center image element and decrease column size in Table

.flat-social a i {
	margin-right: 3px;
}
.flat-social a:hover {
	background: #444;
}
.entry {
	word-wrap: break-word;
	line-height: 22px;
}
.entry p {
	margin-bottom: 20px;
}
.entry img {
	max-width: 100%;
	height: auto;
}
.entry h1, .entry h2, .entry h3, .entry h4, .entry h5, .entry h6 {
	margin-top: 25px;
	margin-bottom: 10px;
	line-height: 1em;
	font-family: Roboto, Tahoma, Arial, helvetica, sans-serif;
	font-weight: normal;
}
.entry h1 {
	font-size: 36px;
}
.entry h2 {
	font-size: 30px;
}
.entry h3 {
	font-size: 24px;
}
.entry h4 {
	font-size: 18px;
}
.entry h5 {
	font-size: 14px;
}
.entry h6 {
	font-size: 12px;
}
.entry ol, .entry ul {
	margin: 0 0 20px 15px;
}
.entry ul li {
	list-style: outside disc;
	list-style-image: none;
}
.entry ol li {
	list-style: outside decimal;
}
.entry li {
	margin: 0 0 5px 0;
}
.entry li ul, .entry li ol {
	margin: 5px 0 0 15px;
}
.entry #user-login ul {
	margin-bottom: -5px;
}
.entry table {	
	width: 100%;	
}
.entry table tr:nth-child(even) {
	background: #ffffff;
}
.entry table td, .entry table th {
	padding: 8px;
    line-height: 1.42857;	
	font-family: arial;
    font-size: 14px;	
	border-right: 2px solid #fff;
}
.entry table thead th {
	background: #144d9e;
	text-align: center;
	text-transform: uppercase;
	color: #fff;
	font-weight: normal;
	padding: 5px 0;
	border: 0;
}
.entry table tbody th {
	background: #fff;
	border-bottom: 2px solid #fff;
}
.entry table tbody td {
	border-bottom: 2px solid #fff;
}
.entry table tr th:last-child, .entry table tr td:last-child {
	border-right: 0;
}
.entry table tbody tr:last-child td, .entry table tbody tr:last-child th {
	border-bottom: 0;
}
.gallery {
	margin: 0 auto 18px;
	clear: both;
}
.gallery .gallery-item {
	display: inline-block;
	padding: 10px;
	text-align: center;
	vertical-align: top;
	width: 100%;
}
.gallery-columns-2 .gallery-item {
	max-width: 50%;
}
.gallery-columns-3 .gallery-item {
	max-width: 33.33%;
}
.gallery-columns-4 .gallery-item {
	max-width: 25%;
}
.gallery-columns-5 .gallery-item {
	max-width: 20%;
}
.gallery-columns-6 .gallery-item {
	max-width: 16.66%;
}
.gallery-columns-7 .gallery-item {
	max-width: 14.28%;
}
.gallery-columns-8 .gallery-item {
	max-width: 12.5%;
}
.gallery-columns-9 .gallery-item {
	max-width: 11.11%;
}
.gallery .gallery-item img {
	height: auto;
	margin: 0 auto;
	-webkit-transition: all .40s;
	-moz-transition: all .40s;
	-o-transition: all .40s;
	transition: all .40s;
}
.gallery .gallery-item a:hover img {
	opacity: 0.6 !important;
	margin: -5px 0 5px;
}
.gallery-caption {
	color: #888;
	margin: 0 0 12px;
}
.gallery-columns-6 .gallery-caption, .gallery-columns-7 .gallery-caption, .gallery-columns-8 .gallery-caption, .gallery-columns-9 .gallery-caption {
	display: none;
}
.gallery br + br {
	display: none;
}
.attachment img {
	display: block;
	margin: 0 auto;
}
blockquote p {
	color: #999;
	padding: 0 18px;
	font-family: Roboto, Tahoma, Arial, helvetica, sans-serif;
	font-size: 18px;
	line-height: 28px;
	font-style: italic;
	border: 4px solid #777;
	border-width: 0 0 0 4px;
}
#related_posts, #author-box {
	clear: both;
}
.block-head {
	padding: 3px 0 0;
	overflow: hidden;
}
.block-head h3, #respond h3 {
	float: left;
	margin-right: 10px;
	font-size: 18px;
	font-family: Roboto, Tahoma, Arial, helvetica, sans-serif;
	color: #00aff4;
}
.entry .text-left {
	text-align: left
}
.entry .text-right {
	text-align: right
}
.entry .text-center {
	text-align: center
}
.entry .text-justify {
	text-align: justify
}
.table>thead>tr>th, .table>thead>tr>td, .table>tbody>tr>th, .table>tbody>tr>td, .table>tfoot>tr>th, .table>tfoot>tr>td {
	padding: 8px;
	line-height: 1.42857;
}
.table>thead>tr>td.active, .table>thead>tr>th.active, .table>thead>tr.active>td, .table>thead>tr.active>th, .table>tbody>tr>td.active, .table>tbody>tr>th.active, .table>tbody>tr.active>td, .table>tbody>tr.active>th, .table>tfoot>tr>td.active, .table>tfoot>tr>th.active, .table>tfoot>tr.active>td, .table>tfoot>tr.active>th {
	background-color: #f5f5f5
}
.table-hover>tbody>tr>td.active:hover, .table-hover>tbody>tr>th.active:hover, .table-hover>tbody>tr.active:hover>td, .table-hover>tbody>tr:hover>.active, .table-hover>tbody>tr.active:hover>th {
	background-color: #e8e8e8
}
.table>thead>tr>td.success, .table>thead>tr>th.success, .table>thead>tr.success>td, .table>thead>tr.success>th, .table>tbody>tr>td.success, .table>tbody>tr>th.success, .table>tbody>tr.success>td, .table>tbody>tr.success>th, .table>tfoot>tr>td.success, .table>tfoot>tr>th.success, .table>tfoot>tr.success>td, .table>tfoot>tr.success>th {
	background-color: #dff0d8
}
.table-hover>tbody>tr>td.success:hover, .table-hover>tbody>tr>th.success:hover, .table-hover>tbody>tr.success:hover>td, .table-hover>tbody>tr:hover>.success, .table-hover>tbody>tr.success:hover>th {
	background-color: #d0e9c6
}
.table>thead>tr>td.info, .table>thead>tr>th.info, .table>thead>tr.info>td, .table>thead>tr.info>th, .table>tbody>tr>td.info, .table>tbody>tr>th.info, .table>tbody>tr.info>td, .table>tbody>tr.info>th, .table>tfoot>tr>td.info, .table>tfoot>tr>th.info, .table>tfoot>tr.info>td, .table>tfoot>tr.info>th {
	background-color: #d9edf7
}
.table-hover>tbody>tr>td.info:hover, .table-hover>tbody>tr>th.info:hover, .table-hover>tbody>tr.info:hover>td, .table-hover>tbody>tr:hover>.info, .table-hover>tbody>tr.info:hover>th {
	background-color: #c4e3f3
}
.table>thead>tr>td.warning, .table>thead>tr>th.warning, .table>thead>tr.warning>td, .table>thead>tr.warning>th, .table>tbody>tr>td.warning, .table>tbody>tr>th.warning, .table>tbody>tr.warning>td, .table>tbody>tr.warning>th, .table>tfoot>tr>td.warning, .table>tfoot>tr>th.warning, .table>tfoot>tr.warning>td, .table>tfoot>tr.warning>th {
	background-color: #fcf8e3
}
.table-hover>tbody>tr>td.warning:hover, .table-hover>tbody>tr>th.warning:hover, .table-hover>tbody>tr.warning:hover>td, .table-hover>tbody>tr:hover>.warning, .table-hover>tbody>tr.warning:hover>th {
	background-color: #faf2cc
}
.table>thead>tr>td.danger, .table>thead>tr>th.danger, .table>thead>tr.danger>td, .table>thead>tr.danger>th, .table>tbody>tr>td.danger, .table>tbody>tr>th.danger, .table>tbody>tr.danger>td, .table>tbody>tr.danger>th, .table>tfoot>tr>td.danger, .table>tfoot>tr>th.danger, .table>tfoot>tr.danger>td, .table>tfoot>tr.danger>th {
	background-color: #f2dede
}
.table-hover>tbody>tr>td.danger:hover, .table-hover>tbody>tr>th.danger:hover, .table-hover>tbody>tr.danger:hover>td, .table-hover>tbody>tr:hover>.danger, .table-hover>tbody>tr.danger:hover>th {
	background-color: #ebcccc
}
.video {
	display: inline-block;
    background: url(iconvideo2.png) no-repeat;
    width: 39px;
    height: 27px;
    position: relative;
    margin: auto -50px -30px -100px;
}
 .video .bullet {
	position: absolute;
	right: -10px;
	top: -10px;
	display: block;
	padding-top: 4px;
	width: 25px;
	height: 25px;
	background: #8ccbf2;
	-moz-border-radius-topleft: 50%;
	-webkit-border-top-left-radius: 50%;
	border-top-left-radius: 50%;
	-moz-border-radius-topright: 50%;
	-webkit-border-top-right-radius: 50%;
	border-top-right-radius: 50%;
	-moz-border-radius-bottomleft: 50%;
	-webkit-border-bottom-left-radius: 50%;
	border-bottom-left-radius: 50%;
	-moz-border-radius-bottomright: 50%;
	-webkit-border-bottom-right-radius: 50%;
	border-bottom-right-radius: 50%;
	text-align: center;
	color: #096faf;
	font-weight: bold;
	font-size: 12px
}
 .pdf {
    display: inline-block;
    background: url(iconpdf2.png) no-repeat;
    width: 35px;
    height: 40px;
    margin: -100px -1px auto 50px;
    position: relative;
}
 table {
	width: 100%;
	margin-top: 10px;	
} 
 table thead tr {
	border-left: 2px solid #fff;
	border-right: 2px solid #fff
}
 table tbody tr.success {
	color: #1a8c3d
}
 table tbody tr.info {
	color: #144d9d
}
 table tbody tr td {
	vertical-align: middle;
	border-left: 0;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff
}

Imagery explanatory

html5

  • Friend, you just put the css, put the html tmb, maybe an image of how it is and how you want... So it gets a little difficult...

  • thank you for remembering, the code has been added

1 answer

1

Hello

If I understand correctly what you want to do is to centralize elements within a TD (table cell).

What I normally do in these cases is to use the flexbox since it helps a lot in most tasks of centralization

 td.image{
    display: flex;
    justify-content:center;
    flex-direction: row;
    align-items: center;
}

and adds a class us td that have image (those on the right)

<td class="image"></td>

Example link I rode. https://jsfiddle.net/0kqpc9d3/

Anyway, I hope I helped, good luck!

Browser other questions tagged html5

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