I would like to know how can I make my text be aligned and centered the same way in every cell. Because if you see there is a slight difference between the first cell who got a link just under . I would my title to be on the same line without disturbing the responsive side and also the "same size cells" side (thanks to the table layout)
$(document).ready(function(){
$(".toggler").click(function(e){
e.preventDefault();
$('.cat'+$(this).attr('data-prod-cat')).toggle();
});
});
td{
display:block;
width:auto;
border:1px dotted red;
background-color:red;
color:white;
margin-bottom:10px;
}
#media only screen and (min-width: 70em) {
td{
display:table-cell;
border:1px dotted red;
background-color:red;
color:white;
margin-bottom:0px;
}
}
p{font-family:'Varela Round';font-weight:bold;text-align:center;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<table style="table-layout: fixed; width:100%" width="100%" cellpadding="0" cellspacing="5">
<tbody>
<tr>
<td><table>
<tr><td><p>SOCIÉTÉS: 230</p></td></tr><tr><td>+ En savoir plus</td></tr>
<tr class="cat1" style="display:none">
<td>Part CAC 40 : 90</td></tr>
<tr class="cat1" style="display:none">
<td>Part Filiales +100MK€: 120</td></tr>
</tr>
</table>
</td>
<td><p>CONTACT</p></td>
<td><p>EMAIL NOMINATIF</p></td>
<td><p>OPT OUT</p></td>
<td><p>LIGNES DIRECTES/MOBILES</p></td>
</tr>
</tbody>
</table>
What you can do is just the element td to the css to have the text-align property as well:
CSS:
p, td{
font-family:'Varela Round';
font-weight:bold;
text-align:center;
}
Also just a side note you for your js if you want to run your js code when the DOM is loaded jquery docs does not suggest you that document ready function instead they suggest:
JS
$(function() {
$(".toggler").click(function(e){
e.preventDefault();
$('.cat'+$(this).attr('data-prod-cat')).toggle();
});
});
Jquery Docs: https://api.jquery.com/ready/
Related
I want to catch a click on a row of a table, but 2 actions based on where it was clicked:
the 'empty space' of 1st column or any other column --> select that row
the 'text' of 1st column --> do something based on that text (example, update that table with list of all staffs)
Note, there are multiple tables in the page, I need to catch the correct table object for updating.
The simple code (1 table) is below.
<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<h2>HTML Table</h2>
<table id="aTable">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
<script>
const tbl=document.getElementById("aTable");
// click on a row, except on 'text' of 1st column
tbl.onclick = (e) => {
// set row = selected
}
// click on 'text' of 1st column
// update the table with new data based on the 'text' of 1st column
</script>
</body>
</html>
You can wrap your text in spans and then handle event separate for span and th.
<tr>
<th><span>Company</span></th>
</tr>
document.querySelectorAll("table tr").forEach(el=>el.addEventListener("click", () => {
// row clicked
})
document.querySelectorAll("table span").forEach(el=>el.addEventListener("click", () => {
// text clicked
})
I have a div inside a cell. From the example code below, it is initially positioned on cell (1,1). Now, I want it to move to other cells inside the table on mouse drag. Here is my code.
<table class="table">
<tr v-for="row in rows">
<td v-for="col in cols">
<div class="ball" v-if="col == 1 && row == 1"></div>
</td>
</tr>
</table>
<script>
export default{
data() {
return{
cols: 10,
rows: 10,
}
}
</script>
<style scoped>
.ball{
display:inline-block;
width: 10px;
height: 10px;
background:blue;
}
td{
width: 100px;
height: 100px;
}
</style>
How could I move it on specific cell using vuejs?
https://jsfiddle.net/cmvn2yda/
I am drawing one table with border=1 but it looks quite prominent as I am enclosing one image inside it so I want to make it thinner for better look and feel.
<table border=1 cellpadding=50 cellspacing=0><tr><td></td></tr></table>
How can I reduce border thickness?
You can style it like this:
td, th {
border: .1px solid black;
}
JSFIDDLE DEMO
This sample code may help you,
CSS+HTML
table{
border:5px solid blue;
}
caption{
color:wheat;
}
th{
border:2px solid yellow;
background-color:grey;
}
td{
border:3px solid red;
background-color:green;
}
<table border=1 cellpadding=50 cellspacing=0>
<caption>TABLE</caption>
<thead>
<tr><th>H1</th><th>H2</th></tr>
</thead>
<tbody>
<tr><td>1</td> <td>1</td></tr>
<tr><td>1</td> <td>1</td></tr>
</tbody>
<tfoot>
<tr><td colspan="2" >FOOTER</td></tr>
</tfoot>
</table>
I searched for some solutions in PHP/HTML/CSS for this, but nothing worked so far, maybe because in most of those examples were sooo much of code so I got lost in it. Could someone explain to me what I need to do or put some simple sample code here?
Table fixed header using CSS
The simplest would be to position: sticky; your th elements:
.tableFix { /* Scrollable parent element */
position: relative;
overflow: auto;
height: 100px;
}
.tableFix table{
width: 100%;
border-collapse: collapse;
}
.tableFix th,
.tableFix td{
padding: 8px;
text-align: left;
}
.tableFix thead th {
position: sticky; /* Edge, Chrome, FF */
top: 0px;
background: #fff; /* Some background is needed */
}
<div class="tableFix">
<table>
<thead>
<tr><th>H1</th><th>Header 2</th><th>Header 3</th><th>4</th><th>5th Header</th></tr>
</thead>
<tbody>
<tr><td>R1C2</td><td>R1C2</td><td>R1C3</td><td>R1C4</td><td>R1C5</td></tr>
<tr><td>R2C1</td><td>R2C2</td><td>R2C3</td><td>R2C4</td><td>R2C5</td></tr>
<tr><td>R3C1</td><td>R3C2</td><td>R3C3</td><td>R3C4</td><td>R3C5</td></tr>
<tr><td>R4C1</td><td>R4C2</td><td>R4C3</td><td>R4C4</td><td>R4C5</td></tr>
<tr><td>R5C1</td><td>R5C2</td><td>R5C3</td><td>R5C4</td><td>R5C5</td></tr>
<tr><td>R6C1</td><td>R6C2</td><td>R6C3</td><td>R6C4</td><td>R6C5</td></tr>
</tbody>
</table>
</div>
Table fixed header for older browsers
If the browsers you need to support do not encompass the position's sticky value, you can take a look at Fix table head using a bit of Javascript
This code (taken from the link in your comment) is the basic code you need. Next time you need to figure that kind of thing out, just remove segments of code to see what breaks, and leave out everything that doesn't break something that you need.
<html>
<head>
<style>
div.tableContainer {
clear: both;
border: 1px solid #963;
height: 285px; /* html>body tbody.scrollContent height plus 23px for the header */
overflow: auto;
width: 756px /* Remember to leave 16px for the scrollbar! */
}
html>body tbody.scrollContent {
display: block;
height: 262px;
overflow: auto;
width: 100%
}
html>body thead.fixedHeader tr {
display: block
}
html>body thead.fixedHeader th { /* TH 1 */
width: 200px
}
html>body thead.fixedHeader th + th { /* TH 2 */
width: 240px
}
html>body thead.fixedHeader th + th + th { /* TH 3 +16px for scrollbar */
width: 316px
}
html>body tbody.scrollContent td { /* TD 1 */
width: 200px
}
html>body thead.scrollContent td + td { /* TD 2 */
width: 240px
}
html>body thead.scrollContent td + td + td { /* TD 3 +16px for scrollbar */
width: 316px
}
</style>
</head>
<body>
<div id="tableContainer" class="tableContainer">
<table width="100%" cellspacing="0" cellpadding="0" border="0" class="scrollTable">
<thead class="fixedHeader">
<tr class="alternateRow">
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody class="scrollContent">
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
.........
</tbody>
</table>
</div>
</body>
</html>
I have been fighting with getting the Dijit.form.DateTextBox working inside of a div. I have found that if I apply the "claro" class to the body tag that it will work just fine. Although, I don't want the claro class overwriting my other styles. Also, I don't have access to my body tag on all of my pages due to MVC.
Here is what I have:
<html>
<head>
<style type="text/css">
body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
</style>
<script src="dojo/dojo.js"
djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dijit.form.DateTextBox");
dojo.require("dijit.layout.ContentPane");
</script>
<link rel="stylesheet" type="text/css" href="dijit/themes/claro/claro.css"
/>
</head>
<body>
<table>
<tr>
<td>
<div dojoType="dijit.layout.ContentPane" class="claro">
<input type="text" name="date1" id="date1" value="2005-12-30" dojoType="dijit.form.DateTextBox" />
</div>
</td>
<td>
<div dojoType="dijit.layout.ContentPane" class="claro">
<input type="text" name="date2" id="date2" value="2005-12-30" dojoType="dijit.form.DateTextBox" />
</div>
</td>
</tr>
</table>
</body>
</html>
Just had him implement the Calendar feature that comes with jQueryUI. It is much more straight forward. I see Dojo as more of an Application Framework instead of just using certain widgets for web pages.
This happens because, by default all dojo pop-ups are appended to the BODY (weird).
I found a work around. Just copy the tundra/calendar.css to calendarFix.css and remove all .tundra or .claro references from it. For example, consider this fragment:
:
.tundra .dijitCalendarDecrease {
background-position: top left;
}
.tundra .dijitCalendarIncrease {
background-position: -30px top;
}
.tundra .dijitCalendarContainer {
font-size: 100%;
border-spacing: 0;
border-collapse: separate;
border: 1px solid #ccc;
margin: 0;
}
:
to
:
.dijitCalendarDecrease {
background-position: top left;
}
.dijitCalendarIncrease {
background-position: -30px top;
}
.dijitCalendarContainer {
font-size: 100%;
border-spacing: 0;
border-collapse: separate;
border: 1px solid #ccc;
margin: 0;
}
: