Good afternoon, I have a problem with a th. I would like the text that contains the th with the .nc2 class to adapt downwards, but without the left and right arrows moving. I leave you the html code and the styles that I use. .
$('document').ready(function() {
$('[data-toggle="tooltip"]').tooltip()
});
.well23 {
min-height: 20px;
font-family: 'Muli-SemiBold';
font-size: 11px;
padding: 8px;
background-color: #5a274f;
border: 1px solid #5a274f;
border-radius: 0px;
color: #fefefe;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}
.form-horizontal {
margin-left: 10px;
background-color: #cecece;
padding: 10px;
width: 867px;
border-radius: 10px;
}
table.check td,
table.check th {
/*border: none;*/
font-family: 'Muli', sans-serif;
/*padding: 0.2rem;*/
white-space: nowrap;
word-break: keep-all;
border: 1px solid #ddd;
padding-top: 0px;
padding-bottom: 0px;
}
table.check th.check {
font-size: 10px;
color: #ffffff;
background-color: #5a274f;
min-height: 20px;
/*max-width: 80px;*/
border: none;
text-align: left;
}
.nc1 {
min-width: 37px !important;
max-width: 37px !important;
}
.nc2 {
min-width: 300px !important;
max-width: 300px !important;
}
.numcheck {
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
min-width: 438px !important;
max-width: 438px !important;
}
.nc3 {
min-width: 60px !important;
max-width: 60px !important;
}
.nc4 {
min-width: 46px !important;
max-width: 46px !important;
}
.nc5 {
min-width: 45px !important;
max-width: 45px !important;
overflow: hidden;
text-overflow: ellipsis;
}
.nc6 {
min-width: 45px !important;
max-width: 45px !important;
overflow: hidden;
text-overflow: ellipsis;
}
.A1 {
min-width: 30px !important;
max-width: 30px !important;
}
.A2 {
min-width: 100px !important;
max-width: 100px !important;
}
.A3 {
min-width: 60px !important;
max-width: 60px !important;
}
.A5 {
min-width: 55px !important;
max-width: 55px !important;
}
.A6 {
min-width: 35px !important;
max-width: 35px !important;
}
.A7 {
min-width: 25px !important;
max-width: 25px !important;
}
.active {
background-color: whitesmoke;
}
.desactive {
background-color: grey;
}
.insumo {
display: none;
}
span:hover {
cursor: pointer;
}
.meta{
height: 70px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="../../../resources/css/aplicaciones/estilos.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<div id="container-fluid">
<form class="form-horizontal" id="formlogro" name="formlogro">
<div class="form-group form-group-sm">
<div class="col-md-12 col-sm-12 col-xs-12">
<table class="table table-bordered check" id="check">
<thead class="table-header check">
<tr class="check">
<th class="check nc1">
<p style="cursor: pointer;"><i
class="far fa-plus-square" onclick="" data-toggle="tooltip"
data-placement="top" data-original-title="Añadir check"></i></p>
</th>
<th class="check nc2">Check</th>
<th class="check nc3">Acciones</th>
<th class="check nc4">Avance 0 %</th>
<th class="check nc5">F. planeada</th>
<th class="check nc6">F. final</th>
</tr>
</thead>
<tbody class="check">
<tr class="active" id="check_re_0" style="height: 70px;">
<th class="nc1" style="padding-left: 5px;">
<span onclick="" style="display: inline-block;"><i class="fas fa-eye"
data-toggle="tooltip" data-placement="top"
data-original-title="ocultar check" style="color: purple;"></i></span>
<span onclick="" style="display: inline-block;"><i class="far fa-edit"
data-toggle="tooltip" data-placement="top"
data-original-title="Editar check" style="color: purple;"></i></span>
<span onclick="" style="display: inline-block;"><i class="fas fa-trash-alt"
data-toggle="tooltip" data-placement="top"
data-original-title="Elimina check" style="color: purple;"></i></span>
</th>
<th class="nc2" style="padding-left: 2px;">
<span onclick="" style="display: inline-block;"><i class="fas fa-arrow-right"
data-toggle="tooltip" data-placement="top"
data-original-title="Insumos de entrada"></i></span>
<span class="numcheck" data-toggle="tooltip" data-placement="top"
data-original-title="1.-prueba-BPerea(Difusión)"><b>
1.-prueba</b>-BPerea(Difusión)este texto quiero que se despliege hacia abajo</span>
<span style="display: inline-block;"><i class="fas fa-arrow-right"
data-toggle="tooltip" data-placement="top"
data-original-title="Insumos de salida"></i></span>
</th>
<th class="nc3">
<span><a style="display: inline-block;color:red;"><i class="fas fa-file-archive"
data-toggle="tooltip" data-placement="top"
data-original-title="Último archivo"></i></a></span>
<span onclick="" style="display: inline-block;color:purple"><i data-toggle="tooltip"
data-placement="top" data-original-title="Versiones"
class="fas fa-archive"></i></span>
<span><a style="color: purple;display: inline-block;"><i data-toggle="tooltip"
data-placement="top" data-original-title="Añadir entregable"
class="fas fa-plus-circle"></i></a></span>
<span><a href="" style="display: inline-block;color:purple"><i data-toggle="tooltip"
data-placement="top" data-original-title="Redactar asunto"
class="far fa-edit"></i></a><a></a></span><a>
<span></span></a><a onclick="" style="display: inline-block;color:purple"><i
data-toggle="tooltip" data-placement="top" data-original-title="Insumos"
class="fas fa-coins"></i></a>
</th>
<th class="nc4">
<progress id="file" style="width: 32px;" max="100" value="0"></progress> <span>0
%</span>
</th>
<th class="nc5">
</th>
<th class="nc6">
</th>
</tr>
</tbody>
</table>
</div>
</div>
</form>
</div>
</body>
</html>
I hope you can help me in advance thank you very much
this is the result of the modifications
This would be the result of what was mentioned in the comment in case I did not make myself understood very well.
This would be the result if I'm not mistaken