When we add a table within a grid it forces the next column to flow underneath and then you can't control your display for different devices sizes. Does anyone knows how to fix this?
<div class="ui grid">
<div class="sixteen wide mobile eight wide tablet four wide computer column">
<p>1 row mobile - 2 tablet - 4 computer</p>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</div>
<div class="sixteen wide mobile eight wide tablet four wide computer column">
<p>1 row mobile - 2 tablet - 4 computer</p>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</div>
<div class="sixteen wide mobile eight wide tablet four wide computer column">
<p>1 - row mobile - 2 tablet - 4 computer</p>
</div>
<div class="sixteen wide mobile eight wide tablet four wide computer column">
<p>1 - row mobile - 2 tablet - 4 computer</p>
</div>
</div>
Try removing the second table and you will see that it will replace itself properly.
When you run the debug in chrome you see that it changes the class where the table is contained to:
Before
sixteen wide mobile eight wide tablet four wide computer column
After
sixteen wide mobile eight tablet four computer column
Related
<tr>
<th>Photo</th>
<th>Description</th>
<th>Price</th>
</tr>
<tr>
<td>
<img src="images/square.png" alt="box" width="70px" />
</td>
<td class="description">The Rhodes piano is an electro-mechanical piano,
invented by Harold Rhodes during the fifties and later manufactured in a number
of models, first in collaboration with Fender and after 1965 by CBS. It employs
a piano-like keyboard with hammers that hit small metal tines, amplified by
electromagnetic pickups.
</td>
<td id="price">$1400</td>
</tr>
</table>
What I am trying to achieve here is for the $1400 price range to line up with the first line of text in the paragraph. I will have two more of these tables that look exactly the same. I have learned that when entering table data; the data will be in the center of the box. What I think works is giving the price range a class and moving them up using padding-bottom by 55px. I was jsut wondering if there was a better way to move up the price range?
Hi I want to scrap the data from the table. I need all the weather information for all days
click to see image
Please check this link
https://www.accuweather.com/en/in/bengaluru/204108/month/204108?view=table
Source code:
<tbody>
<tr class="pre">
<th scope="row">Tue <time>5/1</time></th>
<td>91°/71°</td>
<td>0 <span class="small">in</span></td>
<td>0 <span class="small">in</span></td>
<td> </td>
<td>93°/71°</td>
</tr>
<tr class="pre">
<th scope="row">Wed <time>5/2</time></th>
<td>91°/75°</td>
<td>0.03 <span class="small">in</span></td>
<td>N/A <span class="small">in</span></td>
<td> </td>
<td>93°/71°</td>
</tr>
<tr class="today lo calendar-list-cl-tr cl hv" data-href="https://www.accuweather.com/en/in/bengaluru/204108/daily-weather-forecast/204108?day=1">
<th scope="row">Thu <time>5/3</time></th>
<td>93°/72°</td>
<td>0.04 <span class="small">in</td>
<td>0 <span class="small">in</span></td>
<td>
<div class="icon i-17-s"></div>
<p>A thunderstorm in spots</p>
</td>
<td>93°/71°</td>
</tr>
</tbody>
This doesn't really directly answer your question but may be the closest you'll get without adding more information to your question and showing that you're making an effort to solve this on your own, by including some code in your question. Or maybe this will work better for you:
Why scrape a site that is willing to practically "hand you" the data, in an easier to handle format, for free?
Accuweather (like many sites) has an API which is free for home use (free up to 50 calls per day) Here is a link.
However (as a big weather & data geek) I much prefer DarkSky Weather API, which allows up to 1000 calls a day for free and (depending on where you're interested in querying) is the most accurate I've seen. (H The get the data from their own sources combined with everything else they can get their hands on (Here is a link.)
I have an Access DB that, for over a year now, has bee automatically opening itself every 8 hours (with Windows Task Scheduler) and querying detailed weather 10 days into the future and 3 days into the past, seeking weather trends and ultimately doing a pretty good job of predicting my home heating costs.
In the USA (where I am not) they even claim the most accurate forecasts down the square-yard, down to the minute.
"It's going to rain this afternoon from 1:17pm until 2:05pm at an average intensity of 0.6mm/hr."
Plus, DarkSky is the only one with an optional Emoji Weather Map. Not very useful but always good for a chuckle. lol
Just for fun, here's your area tomorrow... split down the middle there eh? (They do have real data too.)
Anyway it's worth checking out - but as #Peh indicated, you can't expect all the work to be done for you.
I´m a Bootstrap guy, and find Semantic UI, i think it´s awesome. So i´m in the basic learning process, and most of all the GRID SYSTEM.
I read and experiment my own excercise with the grid, and find that works with 16 columns grid, columns size can be definied in the row:
<div class="ui grid">
<div class="five column row">
<div class="column">1</div>
...
</div>
... and in the column itself:
<div class="eight wide column"></div>
And learn about stackable and doubling columns, and learn that you can specify colums sizes for each three devices ( mobile, tablet, computer ).
<div class="six wide tablet eight wide computer column"></div>
My question is, since it´s a 16 columns based grid, it´s not divisible in 3 with equal values how do i get 3 columns in a specific device? Maybe this can be done with doubling but i need a solid solution, i mean, don´t depend in the other devices sizes.
In Bootstrap it would be as simple as ( example of small screen, 12 columns grid ):
<div class="col-sm-4">Content here</div>
Thanks!
Sebastián.
<div class="ui equal width three column grid">
<div class="column">1</div>
<div class="column">2</div>
<div class="column">3</div>
</div>
If I understand your question right this should work for you.
Grid Example - Semantic UI
Inside a parent table, I have table1(with 3 rows) and table2(with 2 rows). I need table2 to align at the top with table1 and right now its centering table2. I know about divs and float but this page is getting sent through a mail server and it renders the page all weird and I have to use tables.
I tried to post some images of my code but its saying I need at least 10 reputations to post images?
try adding valign="top" on your parent table td elements as the default vertical alignment is center or middle for td elements
<table id="parent">
<tr>
<td valign="top">
<table id="table1"></table>
</td>
<td valign="top">
<table id="table2"></table>
</td>
</tr>
</table>
Currently i am getting 100 Records from my Servlet .
I want to display only 20 Records per page , i am using dojox.grid.DataGrid , but still its displaying all the 100 Records
Please help .
<body class=" claro ">
<span dojoType="dojo.data.ItemFileReadStore" jsId="store1" url="http://localhost:8080/Game/servlet/Hi"></span>
<table dojoType="dojox.grid.DataGrid" store="store1" rowsPerPage="20" rowSelector="20px"
style="width: 100%; height: 500px;">
<thead>
<tr>
<th width="150px" field="name">Namer3</th>
<th width="150px" field="dept">Deptr3</th>
</tr>
</thead>
</table>
</body>
I would suggest you start using a QueryReadStore, and change your servlet to respect the start and count parameters that are part of the post. This will allow the grid to fetch the rows 1-20, then 21-40 when the user scrolls down, and so forth.
If you're looking to tell the grid to render only 20 rows at a time and wait for a scroll event for the others, that should already be handled. I would suggest you double check your grid. Initially 20 rows should be rendered with values, and the later ones should just have "..." inside all the values until scrolled into view.